Javascript 从分配的SVG大小中绘制的强制有向图

我正试图创建一个力定向图。当我使用样本数据时，它画得很好。但是，当我使用自己的数据时，节点似乎超出了svg的大小。 以下是我得到的：

这是我的代码：

var nodes = createFDGNodes(stopsByLine);
var links = createFDGLinks(stopsByLine);

var simulation = d3.forceSimulation()
                    .force("link", d3.forceLink()
                        .id(function(d) { return d.id; })
                    )
                    .force("charge", d3.forceManyBody()
                        .distanceMin(function(d) {return 1; })
                    )
                    .force("center", d3.forceCenter(960/2, 500/2));

const circleGroup = d3.select("div.transit-network")
                    .append("svg")
                    .attr("width", 960)
                    .attr("height", 500)
                    .append("g")
                    .attr("class","fdg");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var link = circleGroup.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(links)
            .enter().append("line")
                .attr("stroke", "black")
                .attr("stroke-width", 1);

var node = circleGroup.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(nodes)
            .enter().append("circle")
                .attr("r", 5)
                .attr("class", function(d) {return "line-"+d.lineId+" stop-"+d.id;})
                .attr("fill", function(d){
                    return color(d.lineId);
                });

simulation.nodes(nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(links);

function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}

如何使图形在分配的svg大小内绘制？

使仿真适合分配区域的“正确”方法是调整仿真中的所有力，如

forceManyBody

，

forceLink

，

forceCenter

等

但是，您可以强制模拟（不使用双关语）以适合给定区域。例如，在下面的演示中，将在

勾选

函数中使用此选项将模拟限制在100 x 100像素的小区域内：

node.attr("transform", (d) => {
    return "translate(" + (d.x < 10 ? dx = 10 : d.x > 90 ? d.x = 90 : d.x) +
        "," + (d.y < 10 ? d.y = 10 : d.y > 90 ? d.y = 90 : d.y) + ")"
})

使您的模拟装置位于分配区域内的“正确”方法是调整模拟中的所有力，如

forceManyBody

，

forceLink

，

forceCenter

等

但是，您可以强制模拟（不使用双关语）以适合给定区域。例如，在下面的演示中，将在

勾选

函数中使用此选项将模拟限制在100 x 100像素的小区域内：

node.attr("transform", (d) => {
    return "translate(" + (d.x < 10 ? dx = 10 : d.x > 90 ? d.x = 90 : d.x) +
        "," + (d.y < 10 ? d.y = 10 : d.y > 90 ? d.y = 90 : d.y) + ")"
})

---

只需使用.strength函数进行调整；e、 g

         .force("charge", d3.forceManyBody().strength(-5) )

---

只需使用.strength函数进行调整；e、 g

         .force("charge", d3.forceManyBody().strength(-5) )

Mike Bostock的也可以使用，您可以设置半径以匹配节点

node.attr（“cx”，函数（d）{return d.x=Math.max（radius，Math.min（width-radius，d.x））；}
.attr（“cy”，函数（d）{返回d.y=Math.max（半径，Math.min（高度-半径，d.y））；}
Mike Bostock的也可以使用，您可以设置半径以匹配节点

node.attr（“cx”，函数（d）{return d.x=Math.max（radius，Math.min（width-radius，d.x））；}
.attr（“cy”，函数（d）{返回d.y=Math.max（半径，Math.min（高度-半径，d.y））；}
使用适合您的数据集的viewBox使用适合您的数据集的viewBox