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中的缩放功能。我不建议保持这种方式，但我不想做重度重构。祝你好运，希望有所帮助！

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

1 个答案: