创建于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可视化库

回答

相关问题