d3.js - 在 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 中访问您的缩放功能通过使其成为全局变量。我不建议保持这种方式，但我不想进行大量重构。祝你好运，希望有帮助!