Question

我正在尝试将一个d3有向图（this one）插入到Thorax（超级骨干类型）视图中。我能够做到这一点，但仍然对它的工作方式有疑问（d3代码）。

首先，我们创建传递节点和边的力布局

 var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(150)
.charge(-500)
.on('tick', tick)

这是否实际创建了图表？

这两行做什么
```
this.path = this.svg.append('svg:g').selectAll('path');
this.circle = this.svg.append('svg:g').selectAll('g');
```
将svg:g元素附加到svg元素。好的我明白了。但是用selectAll。我不明白。路径已经存在吗？由力布局创造？
this.path = this.path.data(this.links);这是做什么用的？我真的不知道？

然后追加路径。

 this.path.enter().append('svg:path')
 .attr('class', 'link')
 .style('marker-start', function (d) {
      return d.left ? 'url(#start-arrow)' : '';
 })
 .style('marker-end', function (d) {
      return d.right ? 'url(#end-arrow)' : '';
 });

然后去节点。从

开始

 this.circle = this.circle.data(this.nodes, function (d) {
     return d.id;
 });

首先创建一个组，我认为是为了保持圈子和标签文本在一起
```
var g = this.circle.enter().append('svg:g');
```

现在我们创建圆圈。

g.append('svg:circle')
    .attr('class', 'node')
    .attr('r', 12)
    .style('stroke', _.bind(function (d) {
         return d3.rgb(this.colors(d.id)).darker().toString();
    }, this))
    .classed('reflexive', function (d) {
         return d.reflexive;
    })

将标签文本附加到储存组。

g.append('svg:text')
    .attr('x', 0)
    .attr('y', 4)
    .attr('class', 'id')
    .text(function (d) {
         return d.id;
    });

所以我对所发生的事情有了全面的了解。但不完全是。感谢任何帮助，更好地了解发生在哪里的事情。

d3有向图，它是如何工作的

0 个答案: