如何在D3.js V4中製作靜態力圖？

請注意，這個問題與D3的V4版本有關。這是相當新的，所以沒有很多問題解決這個版本的問題。如何在D3.js V4中製作靜態力圖？

我正在努力使一個D3力圖靜態。我當然在「https://bl.ocks.org/mbostock/1667139」上找到了這個例子。我已經添加了隊列以用於在動態強制示例中工作的數據加載。

當我運行下面的腳本時，middel中會顯示一個黑點。我很難弄清楚我做錯了什麼。

<!DOCTYPE html> 
<meta charset="utf-8"> 


<style> 

.links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
} 

.nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 


</style> 

<head> 
</head> 

<body> 

<script src="/sources/d3/d3.min.js"></script> 
<script src="/sources/jquery-3.1.1.min.js"></script> 

<svg width="960" height="600"></svg> 

<script> 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

//var n = 100, 
    //nodes = d3.range(n).map(function(i) { return {index: i}; }), 
    //links = d3.range(n).map(function(i) { return {source: i, target: (i + 3) % n}; }); 

var simulation = d3.forceSimulation(attributes) 
    .force("charge", d3.forceManyBody().strength(-80)) 
    .force("link", d3.forceLink(edges).distance(20).strength(1).iterations(10)) 
    .force("x", d3.forceX()) 
    .force("y", d3.forceY()) 
    .stop(); 

var loading = svg.append("text") 
    .attr("dy", "0.35em") 
    .attr("text-anchor", "middle") 
    .attr("font-family", "sans-serif") 
    .attr("font-size", 10) 
    .text("Simulating. One moment please…"); 

// LOAD DATA 
d3.queue() 
    .defer(d3.csv, "/data/attributes") 
    .defer(d3.csv, "/data/edges") 
    .await(analyze); 

function analyze(error, attributes, edges) { 
     if(error) { console.log(error); } 
// Use a timeout to allow the rest of the page to load first. 
d3.timeout(function() { 
    loading.remove(); 

    // See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick 
    for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin())/Math.log(1 - simulation.alphaDecay())); i < n; ++i) { 
    simulation.tick(); 
    } 

    //console.log(nodes); 
    //console.log(links); 
    console.log(attributes); 
    console.log(edges); 

    g.append("g") 
     .attr("stroke", "#000") 
     .attr("stroke-width", 1.5) 
    .selectAll("line") 
    .data(edges) 
    .enter().append("line") 
     .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; }); 

    g.append("g") 
     .attr("stroke", "#fff") 
     .attr("stroke-width", 1.5) 
    .selectAll("circle") 
    .data(attributes) 
    .enter().append("circle") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", 4.5); 
}); 
}; 

</script>

數據：屬性

id,name,age,gender 
id001,Mark,25,male 
id002,Lene,30,female 
id003,Simon,22,male 
id004,Sussie,45,female 
id005,Kim,23,male

數據：邊緣

source,target 
id001,id002 
id001,id003 
id002,id004 
id003,id004

來源

2017-02-08 Kasper Christensen

你的模擬工作的'nodes'而你的圈子是使用從文件中讀取的內容創建到「屬性」中的，你需要將'nodes'作爲數據綁定來創建該圈，然後再次丟失從該文件加載的信息......獲得進一步幫助，請提供更多的背景信息，並且最好設置一個工作演示。 – altocumulus

@altocomolus：我現在添加了數據文件，希望對您有幫助 –

@altacomolus：感謝您的幫助，我設法瞭解瞭如何做到這一點如果你想要你可以添加一個答案，並解釋我背後的邏輯沒有（除非你自己有一個更聰明的方法）。然後我會接受你的答案作爲解決方案。否則，我們把它留在這裏:) –

所以溶液變到「VAR模擬」部分移動到加載數據的一部分。另外，必須有「id（function（d）{return d.id;}）」鏈接/邊緣數據。（我真的不明白爲什麼，但再一次，我在D3編程我不那麼熟練。澄清可以在註釋部分提供，並且我會更新的答案。

<!DOCTYPE html> 
<meta charset="utf-8"> 

<style> 

.links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
} 

.nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 


</style> 

<head> 
</head> 

<body> 

<script src="/sources/d3/d3.min.js"></script> 
<script src="/sources/jquery-3.1.1.min.js"></script> 

<svg width="960" height="600"></svg> 

<script> 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var loading = svg.append("text") 
    .attr("dy", "0.35em") 
    .attr("text-anchor", "middle") 
    .attr("font-family", "sans-serif") 
    .attr("font-size", 10) 
    .text("Simulating. One moment please…"); 

// LOAD DATA // 
d3.queue() 
    .defer(d3.csv, "/data/attributes") 
    .defer(d3.csv, "/data/edges") 
    .await(analyze); 

function analyze(error, attributes, edges) { 
    if(error) { console.log(error); } 
    console.log(attributes); 
    console.log(edges); 

// THIS PART NEED TO GO INSIDE THE DATA LOADING FUNCTION 
// ALSO NOTICE THE ".id(function(d) { return d.id; })" 
var simulation = d3.forceSimulation(attributes) 
    .force("charge", d3.forceManyBody().strength(-80)) 
    .force("link", d3.forceLink(edges).id(function(d) { return d.id; }).distance(20).strength(1).iterations(10)) // the ".id(function(d)..." binds the data to the edges 
    .force("x", d3.forceX()) 
    .force("y", d3.forceY()) 
    .stop(); 

// Use a timeout to allow the rest of the page to load first. 
d3.timeout(function() { 
    loading.remove(); 

    // See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick 
    for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin())/Math.log(1 - simulation.alphaDecay())); i < n; ++i) { 
    simulation.tick(); 
    } 

    g.append("g") 
     .attr("stroke", "#000") 
     .attr("stroke-width", 1.5) 
    .selectAll("line") 
    .data(edges) 
    .enter().append("line") 
     .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; }); 

    g.append("g") 
     .attr("stroke", "#fff") 
     .attr("stroke-width", 1.5) 
    .selectAll("circle") 
    .data(attributes) 
    .enter().append("circle") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", 4.5); 

}); 
}; 
</script>

來源

2017-02-09 20:28:52

如何在D3.js V4中製作靜態力圖？

回答

相關問題