D3 JS強制佈局：使用鏈接參數設置節點半徑

Question

我想從我的JSON鏈接數據中設置參數爲value的節點半徑。節點和鏈路具有以下格式

"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 }) 

如何從鏈接中提取數據？

Answer 1

看看修改後的函數，我在修改節點數據以從鏈接添加值數據。我希望這是你正在尋找的。

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() { 
 
\t \t for(var j = 0 ; j < graph.nodes.length ; j++) { 
 
\t \t \t for(var i = 0 ; i < graph.links.length ; i++) { 
 
\t \t \t \t if(graph.nodes[j].id == graph.links[i].source) { 
 
\t \t \t \t \t graph.nodes[j].value = graph.links[i].value; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t return graph.nodes; 
 
} 
 
    var node = svg.append("g") 
 
     .attr("class", "nodes") 
 
    .selectAll("circle") 
 
    .data(modified()) 
 
    .enter().append("circle") 
 
     .attr("r", function (d) { 
 
\t \t if(d.value == NaN) { 
 
\t \t \t d.value = 5; 
 
\t \t } 
 
\t \t 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>