1

我正在做一个项目，该项目可视化书籍之间的引用。值得一提的是，我是 Javascript 的初学者。因此，我无法通过阅读 D3.js API 参考来走得更远。我使用了这个示例代码，效果很好。

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

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

等等

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

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

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

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

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

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

提前致谢。

最好的问候埃涅阿斯

4

1 回答 1

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

希望这有帮助！

于 2012-07-10T22:48:20.457 回答