D3力有向圖方向

Question

我是D3的新手，並且試圖製作類似於這個圖的example，但有幾件事讓我感到困惑。我不確定這個例子是指D3內置的東西，還是他們正在使用的數據集。

像這裏，我不確定id在d.id.作爲示例的數據看起來像這樣，這讓我覺得ID是從數據。還是它代表了一個索引值？

"nodes": [ 
    {"id": "Myriel", "group": 1}, 
    {"id": "Napoleon", "group": 1} 
     ], 
      // etc 
"links": [ 
    {"source": "Napoleon", "target": "Myriel", "value": 1}, 
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}, 
    {"source": "Mme.Magloire", "target": "Myriel", "value": 10}, 
      //etc 

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { return d.id; })) <-- where is this from? 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)); 

SO！在我的代碼中，我得到一個重複數千次的錯誤，'未捕獲的錯誤：丟失：X'，其中X是我的鏈接數組中第一個源的值。我可以console.log我的數據，它看起來很好，並且元素呈現給DOM，但都聚集在SVG的左上角。我不知道什麼是錯的。我想我有兩個問題。

1. 有人可以澄清有關示例id事情嗎？

2. 我的錯誤是什麼意思？

任何幫助，將不勝感激。

我的代碼;

var graph 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 


d3.json("./mock.json", function(json) { 
    var graph = json 
     console.log(graph); 
     console.log(graph.nodes); 

     var simulation = d3.forceSimulation() 
     .force("link", d3.forceLink(graph.links)) 
     .force("charge", d3.forceManyBody()) 
     .force("center", d3.forceCenter(width/2, height/2)); 

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

    var node = svg.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter().append("circle") 
     .attr("r", 5) 
     //.attr("fill", function(d) { return color(d.id); }) 
     .call(d3.drag() 
     .on("start", dragstarted) 
     .on("drag", dragged) 
     .on("end", dragended)); 

    node.append("title") 
     .text(function(d) {return d.text }); 

    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; 
} 

}); 

數據：

{ 
"nodes":[ 
     {"reference":5, "year": 0, "text":"The amount of time spent on video gaming is related negatively to academic achievement", "tags":["Academic disturbance"]}, 
     {"reference":5, "year": 0, "text":"Digital addiction ranges from <1% and 38%", "tags":["Addiction"]}, 
     {"reference":58, "year": 0, "text":"Patological video game play impacts negativelly academic achievement", "tags":["Addiction"]}, 
     {"reference":77, "year": 2009, "text":"74% of adults have Internet access at home", "tags":["Adults"]}, 
     {"reference":64, "year": 0, "text":"Apathetic users spend short times on web pages, follow no logical order, and make random selections", "tags":["Apathetic hypertext users3"]}, 
     {"reference":8, "year": 0, "text":"49.8% of sessions are shorter than 5 seconds", "tags":["App usage"]} 
     ], 
"links": [ 
     {"source":0,"target":2}, 
     {"source":0,"target":6}, 
     {"source":1,"target":6}, 
     {"source":1,"target":3}, 
     {"source":1,"target":2} 

] 
} 

Answer 1

有兩個問題與您的代碼：

1. 的6指數，看到你的links陣，是不是nodes陣列中可用。 nodes的長度爲6，這意味着最大的索引是5。即使使用正確的代碼，這也會導致錯誤。我在下面的工作示例中將6更改爲5，我相信這正是您想要的。

2. 由於鏈接基於索引，因此可以簡單地返回索引而不是ID，即d3.forceLink().id(function(d,i) { return i; }。

這裏是證明型的功能例如：

var graph 
 

 
var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 

 
var json = { 
 
    "nodes": [{ 
 
    "reference": 5, 
 
    "year": 0, 
 
    "text": "The amount of time spent on video gaming is related negatively to academic achievement", 
 
    "tags": ["Academic disturbance"] 
 
    }, { 
 
    "reference": 5, 
 
    "year": 0, 
 
    "text": "Digital addiction ranges from <1% and 38%", 
 
    "tags": ["Addiction"] 
 
    }, { 
 
    "reference": 58, 
 
    "year": 0, 
 
    "text": "Patological video game play impacts negativelly academic achievement", 
 
    "tags": ["Addiction"] 
 
    }, { 
 
    "reference": 77, 
 
    "year": 2009, 
 
    "text": "74% of adults have Internet access at home", 
 
    "tags": ["Adults"] 
 
    }, { 
 
    "reference": 64, 
 
    "year": 0, 
 
    "text": "Apathetic users spend short times on web pages, follow no logical order, and make random selections", 
 
    "tags": ["Apathetic hypertext users3"] 
 
    }, { 
 
    "reference": 8, 
 
    "year": 0, 
 
    "text": "49.8% of sessions are shorter than 5 seconds", 
 
    "tags": ["App usage"] 
 
    }], 
 
    "links": [{ 
 
     "source": 0, 
 
     "target": 2 
 
    }, { 
 
     "source": 0, 
 
     "target": 5 
 
    }, { 
 
     "source": 1, 
 
     "target": 5 
 
    }, { 
 
     "source": 1, 
 
     "target": 3 
 
    }, { 
 
     "source": 1, 
 
     "target": 2 
 
    } 
 

 
    ] 
 
}; 
 

 
var graph = json; 
 

 
var simulation = d3.forceSimulation() 
 
    .force("link", d3.forceLink().id(function(d, i) { 
 
    return i; 
 
    })) 
 
    .force("charge", d3.forceManyBody()) 
 
    .force("center", d3.forceCenter(width/2, height/2)); 
 

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

 
var node = svg.append("g") 
 
    .attr("class", "nodes") 
 
    .selectAll("circle") 
 
    .data(graph.nodes) 
 
    .enter().append("circle") 
 
    .attr("r", 5) 
 
    //.attr("fill", function(d) { return color(d.id); }) 
 
    .call(d3.drag() 
 
    .on("start", dragstarted) 
 
    .on("drag", dragged) 
 
    .on("end", dragended)); 
 

 
node.append("title") 
 
    .text(function(d) { 
 
    return d.text 
 
    }); 
 

 
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: #aaa; 
 
} 
 

 
.nodes circle { 
 
    pointer-events: all; 
 
    stroke: none; 
 
    stroke-width: 40px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js"></script> 
 
<svg width="500" height="200"></svg>