如何在力导向布局的d3图中实现放大并定位节点

Question

当我尝试 d3 强制定向布局时，我遇到了一个挑战： 我想放大这个 svg。但它对我来说很难整合。我想移除滚动条并为图表设置缩放。

http://nylen.tv/d3-process-map/graph.php

我想要这样的东西，我可以缩放，

http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

下面是我将图形集成到 svg 中的代码，

graph.svg = d3.select('#graph').append('svg')
    .attr('width' , graph.width  + graph.margin.left + graph.margin.right+500)
    .attr('height', graph.height + graph.margin.top  + graph.margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + graph.margin.left + ',' + graph.margin.top + ')');

第二个链接有类似这样的实现缩放，

var svg = d3.select("svg"),
    inner = svg.select("g");

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
  );
    inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom

Answer 1

下面是我从您提供的链接中检查的代码（http://nylen.tv/d3-process-map/graph.php），来自一个名为 script.js 的文件，它没有被缩小:)

obj.positionConstraints.push({
                        weight : c.weight,
                        x      : c.x * graph.width,
                        y      : c.y * graph.height
                    });

他们正在手动计算 x 和 y 位置，如上所示。他们的tick函数代码如下：

for (var name in graph.data) {
        var obj = graph.data[name];

        obj.positionConstraints.forEach(function(c) {
            var w = c.weight * e.alpha;
            if (!isNaN(c.x)) {
                obj.x = (c.x * w + obj.x * (1 - w));
            }
            if (!isNaN(c.y)) {
                obj.y = (c.y * w + obj.y * (1 - w));
            }
        });
    }