Question

我正在开展一个项目，该项目可视化书籍之间的参考。值得一提的是，我是Javascript的初学者。所以，通过阅读D3.js API参考，我无法走得太远。我使用this example code，效果很好。

我的CSV文件的结构如下：

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

等

源和目标通过链接连接。这些是布局的要点：

分别为源节点和目标节点创建两个不同的圆圈。
为源节点和目标节点设置特定颜色。
圆圈应由书籍信息标记，例如源节点用“book 1”标记，目标节点用“book 2”标记。
如果目标之间存在链接，则将此特定链接更宽比其他链接从源到目标。

我希望你能通过创造这些观点来帮助我。

提前致谢。

祝你好运伊尼阿斯

Answer 1

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

希望这有帮助！

在D3.js可视化库中创建强制布局

1 个答案: