創建於D3.js可視化庫

力佈局我工作的一個項目，該項目形象化書籍之間的引用。值得一提的是，我是一個Javascript初學者。所以，我不能通過閱讀D3.js API參考瞭解更多。我用this example code，這很好。創建於D3.js可視化庫

我的CSV文件的結構是這樣的：

source,target 
"book 1","book 2" 
"book 1","book 3"

等

源和目標是通過一個鏈路連接。這些是佈局的要點：

分別爲源節點和目標節點創建兩個不同的圓。
設置特定的顏色的源和目標節點。
這些圓圈應該由書籍信息標記，例如，源節點標記爲「book 1」，目標節點標記爲「book 2」。
如果在目標之間存在鏈接，則將該特定鏈接比從源到目標的其他鏈接更寬。

我希望你能幫助我創造這些觀點。

在此先感謝。

問候埃涅阿斯

來源

2012-07-10 user1514509

d3.js玩弄JSON數據文件比CSV文件好多了，所以我會建議你的CSV數據轉移到一個JSON格式莫名其妙。我最近編碼類似這樣的東西，我有我的節點和鏈接存儲在一個JSON文件格式爲這樣一本詞典：

{ 
'links': [{'source': 1, 'target': 2, 'value': 0.3}, {...}, ...], 
'nodes': [{'name': 'something', 'size': 2}, {...}, ...] 
}

這可以讓你如下初始化節點和鏈路（從視圖後）：

d3.json("data/nodesandlinks.json", function(json) { 
var force = self.force = d3.layout.force() 
    .nodes(json.nodes) 
    .links(json.links) 
    .linkDistance(function(d) { return d.value; }) 
    .linkStrength(function(d) { return d.value; }) 
    .size([width, height]) 
    .start(); 

var link = vis.selectAll("line.link") 
    .data(json.links) 
    .enter().append("svg:line") 
    .attr("class", "link") 
    .attr("source", function(d) { return d.source; }) 
    .attr("target", function(d) { return d.target; }) 
    .style("stroke-width", function(d) { return d.value; }); 

var node = vis.selectAll("g.node") 
    .data(json.nodes) 
    .enter().append("svg:g") 
    .attr("class", "node") 
    .attr("name", function(d) { return d.name; }) 
    .call(force.drag);

希望這有助於！

來源

2012-07-10 22:48:20

您可以服務器json或使用d3將csv轉換爲json。 d3有一些很棒的工具可以將csv轉換成json。這兩個例子可以幫助： CSV字符串JSON - https://gist.github.com/3053667 CSV文件，JSON - https://gist.github.com/3053705 接着這個頁面進一步操縱數組：https://github.com/mbostock/d3/wiki/Arrays – PhoebeB 2012-07-10 23:52:44

創建於D3.js可視化庫

回答

相關問題