Question

我正在尝试将点击缩放功能（例如http://bl.ocks.org/mbostock/2206590）与d3的力布局（例如http://bl.ocks.org/mbostock/1093130）结合起来。想法是在单击力布局图中的节点后，应用缩放过渡，点击的节点移动到中心（同时允许任何其他与力相关的“勾选”继续）。

有没有人知道结合这些功能的现有示例？我一直在尝试自己调整点击缩放示例但是虽然clicked（）函数看起来很简单，但我仍然坚持“路径”变量的角色以及它似乎如何链接到这里。

g.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("id", "state-borders")
      .attr("d", path);

例如，我有一个强制布局，其中所有节点/链接都附加到父g元素，我真的需要上面的等效基准线吗？并且路径变量被输入的d属性的功能是什么？我知道我做错了，因为当点击的函数评估“path.centroid（d）”时，它总是NaN。

感谢您的任何想法！

添加我当前的自动点击/缩放的简化实现（从我的nodeClick函数中触发）完美无缺，直到力布局进一步移动节点（由于电荷，重力，摩擦等参数）...

var k;

        if (d && centered !== d) {
            k = 4;
            centered = d;
        } else {
            k = 1;
            centered = null;
        }

        svg.transition()
            .duration(750)
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -d.x + "," + -d.y + ")");

d3强制布局，点击放大到特定节点

0 个答案: