在d3力导向图中进行缩放和刷选

Question

在d3力导向图中进行缩放和刷选

6

我在进行D3缩放时遇到了正确刷选的问题。我在这里创建了一个jsFiddlehttp://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相对于它们缩放后的位置。

有任何想法吗？

- Eamonn

即使在绘制画笔时考虑了比例，你的鼠标选择（用于画笔）的左上角坐标不再与缩小视图的画布的左上角坐标匹配。你也没有考虑到缩放时的平移，这就是为什么当你放大时它会拖得如此缓慢的原因。 - Elijah

你是指节点吗？我刚刚修改了这个node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(" + scale_val + ")"; }); 但它并没有帮助到任何事情。我想解决平移的问题，因为速度太慢了，而且我认为在缩放时会重置比例尺，所以我实现了一个滑块来帮助缩放。有什么办法可以获得D3中左上角的校正值吗？ - Eamonn

http://jsfiddle.net/Gwp25/4/ - 这是添加了比例尺的版本。 - Eamonn

你看过这个例子吗？ - Lars Kotthoff

谢谢Lars，但是刷选不是问题。问题在于将其与缩放混合在一起，并解决由于具有不同偏移量、缩放级别等而产生的问题。如果您尝试我的jsFiddle中的示例，您将能够在初始级别下进行刷选。然而，如果关闭刷选，使用鼠标滚轮缩放，然后再次打开刷选，您会注意到所选节点不正确。 - Eamonn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Rudolph · Accepted Answer

我认为我有一个符合您要求的可用版本： 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 中访问你的缩放函数。我不建议保持这种方式，但我不想进行大量的重构。祝好运，希望能帮助到你！