Question

我试图配置连接的节点，以便每个节点的连接线长度由数据集配置。

这是我设置长度的行：

[{"Name":"John","Contact":"3331234567"},{"Name":"Doe","Contact":"3017654321"},{"Name":"Smith","Contact":"3001234765"}]

这会将所有连接的节点行长度设置为相同的值，但如何配置以便它读取当前节点距离参数而不是将所有行长度设置为.linkDistance([dataset.edges[0].distance])？

我认为需要遍历每个距离数据集并应用于节点？

小提琴：https://jsfiddle.net/7pvhxfzg/30/

src：

dataset.edges[0].distance

更新了答案：

var w = 500;
var h = 300;
var dataset = {
    nodes:[
            {name:"Adam"},
            {name:"Bob"},
            {name:"Carrie"},
            {name:"Donovan"},
            {name:"Edward"},
            {name:"Felicity"},
            {name:"George"},
            {name:"Hannah"},
            {name:"Iris"},
            {name:"Jerry"}
    ],
    edges:[
            {source: 0, target: 1, distance: 200},
            {source: 0, target: 1, distance: 200},
            {source: 0, target: 3, distance: 200},
            {source: 0, target: 4, distance: 200},
            {source: 1, target: 5, distance: 200}
    ]
};
var force = d3.layout.force()
                        .nodes(dataset.nodes)
                        .links(dataset.edges)
                        .size([w, h])
                        .linkDistance([dataset.edges[0].distance])
                        .charge([-150])
                        .start();

var colors = d3.scale.category10();
var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
var edges = svg.selectAll("line")
                .data(dataset.edges)
                .enter()
                .append("line")
                .style("stroke", "#ccc")
                .style("stroke-width", 5);
var nodes = svg.selectAll("circle")
                .data(dataset.nodes)
                .enter()
                .append("circle")
                .attr("r", 10)
                .style("fill", function(d, i){
                    return colors(i);
                })
                .call(force.drag);

var label = svg.selectAll(".mytext")
                .data(dataset.nodes)
                .enter()
                .append("text")
                .text(function (d) { return d.name; })
                .style("text-anchor", "middle")
                .style("fill", "#555")
                .style("font-family", "Arial")
                .style("font-size", 12);



force.on("tick", function(){
    edges.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; });
    nodes.attr("cx", function(d){ return d.x; })
         .attr("cy", function(d){ return d.y; });
    label.attr("x", function(d){ return d.x; })
         .attr("y", function (d) {return d.y - 10; });


});

小提琴：https://jsfiddle.net/7pvhxfzg/32/

Answer 1

强制布局＆＃39; linkDistance()可以将一个函数作为其参数，在这种情况下，它会调用每个链接的函数，并传入相关链接（请参阅docs）。所以你可以从那里得到距离：

.linkDistance(function(link) { return link.distance })

如何动态设置连接节点的距离长度？

1 个答案: