d3强制定向图中的缩放和刷牙 [英] Zooming and brushing in d3 force directed graph

问题描述

在进行缩放时，我遇到了让D3执行正确刷牙的问题。

I'm having a problem in getting D3 to perform proper brushing when zooming is performed.

我在这里创建了一个jsFiddle http：// jsfiddle .net / Gwp25 / 2 / 显示网络与一些我在别处发现的虚拟数据。下面的操作是这样的。放大（使用鼠标滚轮），然后开启刷牙。完成后，刷节点。所选的节点是关闭的 - 一些出刷区域。下面是代码中处理刷子范围内节点选择的相关部分。

I have a jsFiddle created here http://jsfiddle.net/Gwp25/2/ showing the network with some dummy data I found elsewhere. The operation to follow is this. Zoom in (using mousewheel), then turn on brushing. After doing this, brush the nodes. The nodes that are selected are off - some out of the brush area. Here is the relevant part of the code dealing with the selecting of nodes within the brush extent.

            .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相对于它们的缩放位置。

Does anyone have an idea to fix this. I know it's to do with the nodes and their original position and x, but I'm not quite sure about how to get the node x and y with respect to their zoomed location.

任何想法？

推荐答案

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

I believe I have a working version of what you're looking for: http://jsfiddle.net/Gwp25/8/

你接近实施。

首先，我添加了缩放到 zoom 函数。这很重要，因为d3会在你放大和缩小时自动更新它们。重要的是要注意，我没有使用你的身份尺度。如果使用身份缩放d3缩放行为不会更新缩放。这里是我创建的比例，当没有缩放时与你的相同：

First, I attached scales to the zoom function. This is important as d3 will automatically update them as you zoom in and out. It's important to note that I did not use your identity scales. If you use an identity scale d3 zoom behavior will not update the scale. Here are the scales that I created that are identical to yours when there is no zoom:

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

现在刷 。这是你错误地把原始的身份尺度。

Now the brush also takes scales as parameters. This is where you mistakenly put the original identity scales. So even though the graph was zoomed and panned you used the same scale to map points to the newly zoomed graph.

为了输入笔刷，您可以使用正确的比例，您可以通过调用以下内容访问缩放行为的缩放： zoom.x（）或 zoom.y ）。

In order to feed the brush the correct scales, you can access the zoom behavior's scales by calling: zoom.x() or zoom.y().

一旦你这样做，剩下的就是肉汁。

Once you've done this the rest is gravy.

注意：我有点黑客的代码，所以我可以访问您的缩放功能在 toggleBrushing 通过使其成为一个全局变量。我不建议这样保持，但我不想做重量重构。祝你好运，希望有所帮助！

Note: I hacked the code a bit so I could access your zoom function in toggleBrushing by making it a global variable. I don't recommend keeping it this way, but I didn't want to do heavy refactoring. Good luck, hope that helps!

这篇关于d3强制定向图中的缩放和刷牙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！