我正在尝试value从json链接数据中使用参数设置节点半径。节点和链接具有以下格式
"nodes": {"name": "Flare", "group": 1},
"links": {"source": 0, "target": 1, "value": 10}
使用如下d.group参数设置节点半径可以很好地工作：
nodes.append("circle")
.attr("class", "node")
.attr("r", function (d) { return d.group})
尽管使用链接的类似想法d.value无效：
nodes.append("circle")
.attr("class", "node")
.attr("r", function (d) { return d.value })
如何从链接中提取数据？
查看修改后的函数，我正在修改节点数据以添加来自链接的值数据。我希望这是您要寻找的。
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 4, height / 4));
var graph = {
"nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1},
{"id": "Mlle.Baptistine", "group": 1},
{"id": "Mme.Magloire", "group": 1},
{"id": "CountessdeLo", "group": 1},
{"id": "Geborand", "group": 1},
{"id": "Champtercier", "group": 1},
{"id": "Cravatte", "group": 1},
{"id": "Count", "group": 1},
{"id": "OldMan", "group": 1}
],
"links": [
{"source": "Napoleon", "target": "Myriel", "value": 13},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
{"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
{"source": "CountessdeLo", "target": "Myriel", "value": 10},
{"source": "Geborand", "target": "Myriel", "value": 16},
{"source": "Champtercier", "target": "Myriel", "value": 17},
{"source": "Cravatte", "target": "Myriel", "value": 19},
{"source": "Count", "target": "Myriel", "value": 20},
{"source": "OldMan", "target": "Myriel", "value": 8}
]
};
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
function modified () {
for(var j = 0 ; j < graph.nodes.length ; j++) {
for(var i = 0 ; i < graph.links.length ; i++) {
if(graph.nodes[j].id == graph.links[i].source) {
graph.nodes[j].value = graph.links[i].value;
break;
}
}
}
return graph.nodes;
}
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(modified())
.enter().append("circle")
.attr("r", function (d) {
if(d.value == NaN) {
d.value = 5;
}
return d.value })
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.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; });
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句