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并更精确地设置视图框