在d3力导向图中缩放和刷牙

Question

我在执行缩放时让D3执行正确的刷牙有问题.

我在这里创建了一个jsFiddle http://jsfiddle.net/Gwp25/2/,显示网络中有一些我在别处找到的虚拟数据.要遵循的操作是这样的.放大(使用鼠标滚轮),然后打开刷牙.执行此操作后,刷新节点.选定的节点是关闭的 - 一些在刷子区域之外.以下是处理画笔范围内节点选择的代码的相关部分.

            .on("brush", function() {
                var extent = d3.event.target.extent();
                console.log(extent);
                d3.selectAll(".node").select("circle").classed("selected", function(d) {
                    return d.selected = (extent[0][0] <= x_scale(d.x) && x_scale(d.x) < extent[1][0]
                            && extent[0][1] <= d3.tran(d.y) && y_scale(d.y) < extent[1][1]);
                });
            })

有没有人有想法解决这个问题.我知道它与节点及其原​​始位置和x有关,但我不太确定如何获得节点x和y相对于它们的缩放位置.

有任何想法吗？

Answer 1

我相信我有您正在寻找的工作版本：http://jsfiddle.net/Gwp25/8/

你已经接近实施了。我将解释我改变了什么以使其发挥作用。

首先，我将比例附加到zoom函数上。这很重要，因为 d3 会在您放大和缩小时自动更新它们。需要注意的是，我没有使用您的身份量表。如果您使用身份比例 d3 缩放行为将不会更新比例。以下是我创建的比例，在没有缩放时与您的比例相同：

var x_scale = d3.scale.linear().domain([0, chartWidth]).range([0, chartWidth]);
var y_scale = d3.scale.linear().domain([0, chartHeight]).range([0, chartHeight]);

现在brush也将尺度作为参数。这是您错误地放置原始身份尺度的地方。因此，即使图表被缩放和平移，您也使用相同的比例将点映射到新缩放的图表。

为了提供正确的比例，您可以通过调用：或 来brush访问缩放行为的比例。zoom.x()zoom.y()

一旦你完成了这个，剩下的就是肉汁了。

注意：我对代码进行了一些修改，以便我可以toggleBrushing通过将其设置为全局变量来访问您的缩放功能。我不建议保持这种方式，但我不想进行大量重构。祝你好运，希望有帮助！