D3JS强制布局中心图像

Question

我正在使用 d3js 的强制布局来绘制网络图问题是我的 SVG 被截断了（见下图）如何获得整个图像？我正在使用它来初始化图表：

var width = 1200,
        height = 1000,
        root;

    var force = d3.layout.force()
        .size([width, height])
        .on("tick", tick)
        .start();

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var link = svg.selectAll(".link"),
        node = svg.selectAll(".node");

Answer 1

首先我建议简单地缩放视口...

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
        .attr("viewBox", `${-width/2} ${-height/2} ${width*2} ${height*2}`)

或者你可以计算所有节点的bbox并设置viewbox更精确

D3JS强制布局中心图像

D3JS force layout center image

d3.js

force-layout