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

Question

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

我的 CSV 文件的结构是这样的：

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

等等

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

1. 分别为源节点和目标节点创建两个不同的圆。

2. 为源节点和目标节点设置特定颜色。

3. 圆圈应标有书籍信息，例如源节点 由“book 1”标记，目标节点由“book 2”标记。

4. 如果目标之间存在链接，则使此特定链接更宽 比其他从源到目标的链接。

我希望您可以通过创建这些点来帮助我。

提前致谢。

最好的问候 埃涅阿斯

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

希望这有帮助！