javascript D3 强制布局：如何设置每个节点的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20723564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 force layout: How do I set the size of every node?
提问by occulti
I'm using the amazing D3JS to build a graph. The graph is rendered, but I want my nodes to have each one its size.
我正在使用惊人的 D3JS 来构建图表。图形已呈现，但我希望我的节点具有每个节点的大小。
The data is of this form :
数据是这种形式：
{source: "Antony Hoppkins", target: "Woody Allen", value: 3}
{来源：“安东尼霍普金斯”，目标：“伍迪艾伦”，价值：3}
Here's the code :
这是代码：
var links = graph.links;
var nodes = {};
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 1200,
height = 1500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("#network").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("stroke-width", function(d) { return (d.value)*5; })
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 5);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 10)
;
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 5)
;
}
Any thoughts ?
有什么想法吗 ？
采纳答案by Lars Kotthoff
I'm assuming that you want to set the size of each node (i.e. radius) according to .value. You do this like this:
我假设您想根据.value. 你这样做：
node.append("circle")
.attr("r", function(d) { return d.value * 3; });
You can obviously adjust the factor, or use a scale instead.
您显然可以调整系数，或者改用比例。
回答by cs.matyi
I'm searching for this too and tried to workaround it a little bit.
I think that every object in your db has to be a unique id (or just iterate through). Then in your code at nodeobject you could write something like this:
我也在寻找这个并试图解决它。我认为你的数据库中的每个对象都必须是一个唯一的 id（或者只是迭代）。然后在nodeobject的代码中，您可以编写如下内容：
var node = svg.selectAll(".node")
.data(graph.nodes)
.attr("r", function(d){
if (d.value === myUniqueId){
return 3;
} else {
return 10;
}
})
here the "r"is for the radious.The valueis a name in my db (it can be anything you want). There you can change the nodes sizes.
I know it is not a clean code but I'm just a newbie.
Hope it helps!
这里"r"是radious.Thevalue是我数据库中的一个名字（它可以是你想要的任何东西）。在那里您可以更改节点大小。我知道这不是一个干净的代码，但我只是一个新手。希望能帮助到你！
