d3中的放大鏡

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

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

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

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

你們有其他的選擇嗎？

2014-09-01 Yuvraj

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; });

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

來源

2014-09-01 16:00:35 Elijah

嗨以利亞，我已經嘗試過你上面提到的。我試着放入'd.r'而不是一些恆定的半徑。但是這個'd'對象不是圖表，而是魚眼插件，所以radius屬性不能在那裏訪問。但是如果你有任何有用的演示，請分享。 – Yuvraj 2014-09-02 08:55:49

不，d應該對應於綁定到該元素的數據，而d.fisheye是魚眼插件。我會盡量整理一個簡單的例子。 – Elijah 2014-09-02 15:39:14

嗨，以利亞，你是對的。我沒有在我的入站數據中包含radius到d3。這就是d沒有半徑的原因。感謝您的時間和建議。 – Yuvraj 2014-09-03 09:25:31

d3中的放大鏡

回答

相關問題