gpt4 book ai didi

javascript - 如何改变力布局中d3节点之间的距离

转载 作者:行者123 更新时间:2023-11-29 16:16:26 26 4
gpt4 key购买 nike

我在 d3 中搜索了很多可视化。我能够从数据库中可视化我的数据。现在,我想改变不同 d3 节点之间的距离。有一个函数 force.linkdistance() 用于指定节点之间的距离。目前我提供 100 的恒定距离。我想根据数据库中的列改变每个链接的这个距离。这是一个数字列。我也附上我的代码。请帮助,如果有人可以。

    var okCounter=0;
var width = 960,
height = 500;

console.log("still ok here:",okCounter++);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
console.log("still ok here:",okCounter++);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
console.log("still ok here:",okCounter++);
d3.json("getdata.php", function(error,json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
console.log("still ok here:",okCounter++);
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("path")
.attr("class", "link");
console.log("still ok here:",okCounter++);
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
// .call(force.drag);
console.log("still ok here:",okCounter++);
node.append("image")
.attr("xlink:href", "http://www.clker.com/cliparts/5/6/3 /a/1194984675331456830utente_singolo_architett_01.svg.med.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 24)
.attr("height", 24);
console.log("still ok here:",okCounter++);
node.append("text")
.attr("dx", 24)
.attr("dy", ".35em")
.text(function(d) { return d.name });
console.log("still ok here:",okCounter++);
force.on("tick", function() {
link.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
console.log("still ok here:",okCounter++);
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});</script>

最佳答案

如果您希望 force.linkDistance 发生变化,请使用函数而不是常量。

If distance is a constant, then all links are the same distance. Otherwise, if distance is a function, then the function is evaluated for each link (in order), being passed the link and its index, with the this context as the force layout; the function's return value is then used to set each link's distance. The function is evaluated whenever the layout starts.

(来自 https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#linkDistance)

您可能还想尝试将函数传递给 force.linkStrength,尽管我怀疑效果会很微妙(我自己还没有尝试过)。

关于javascript - 如何改变力布局中d3节点之间的距离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14937385/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com