d3中的放大鏡

Question

我在D3中定製了更像扁平包裝佈局的構建圖表。

我想用此圖表實現放大鏡，以便當用戶將鼠標懸停在圖表上時，它會放大圖表，並且圓圈看起來會更大。

我已經試過插件anythingzoomer.js

但它的問題是我的圖表是在總規模更大，我想擴大其在尺寸上更小，以便原始圖表的映射和克隆上圓圖表不夠準確。

我也使用魚眼失真插件，但它不允許具有不同半徑的圓圈。它給每個圓圈一個固定的半徑。

你們有其他的選擇嗎？

Answer 1

https://github.com/d3/d3-plugins/tree/master/fisheye的魚眼插件提供了一個縮放的z值，您可以使用任何您想要的方式，以便它允許具有不同半徑的圓。 GitHub的自述不包括如何魚眼鏡頭的規模（返回爲z）與具有不同的半徑值，但如果你把基本的例子節點結合一個例子：

node.each(function(d) { d.fisheye = fisheye(d); }) 
    .attr("cx", function(d) { return d.fisheye.x; }) 
    .attr("cy", function(d) { return d.fisheye.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 4.5; }); 

很清楚的看到，你可以改變將R功能更有趣的東西：

.attr("r", function(d) { return d.fisheye.z * d.size; }); 

它會適用於不同大小的元素。