如何在 d3.js 中创建动态圈子和链接？

Question

js。如果我在直接 html 中使用节点意味着它显示的图表就像

<div class="col-md-12" id="routeTestDisplay">
<svg width="500" height="250">
<g class="node" transform="translate(22.9523886259546,114.1646234701563)"><circle r="8" style="fill: rgb(49, 130, 189);"></circle><text x="12" dy=".35em" style="fill: rgb(49, 130, 189);">A</text></g>
<g class="node" transform="translate(110.00281475549397,114.1646234701563)"><circle r="8" style="fill: rgb(49, 130, 189);"></circle><text x="12" dy=".35em" style="fill: rgb(49, 130, 189);">B</text></g>
</svg>
</div>.

但我想把它画成动态的

var svg1 = $('<svg width=500 height=250></svg>');

    for(var x = 0; x < position.length; x++) {
        var obj = position[x];
        var g = '<g class="node" transform="translate('+obj.x+','+obj.y+')"><circle r="8" style="fill: rgb(49, 130, 189);"></circle><text x="12" dy=".35em" style="fill: rgb(49, 130, 189);">A</text></g>'
        svg1.append(g);
    }
    $('#routeTestDisplay').append(svg1);

图表不显示。当我在 Firefox 中检查元素时，我可以看到 html。谁能给我解决方案？

Answer 1

以下是我将如何使用 D3 动态显示一些节点。

首先我有一些数据：

var data = [{
  x: 100,
  y: 100,
  transformX: 22.9523886259546,
  transformY: 114.1646234701563
}, {
  x: 200,
  y: 200,
  transformX: 110.00281475549397,
  transformY: 114.1646234701563
}, {
  x: 300,
  y: 250,
  transformX: 22.9523886259546,
  transformY: 160.00281475549397
}]

然后我创建我的容器：

//html
<div id='container'>

</div>

//JS
var svg = d3.select("#container").append("svg")
  .attr("width", 400)
  .attr("height", 400);

然后我会根据数据创建节点。在这里您可以设置 x 和 y，或者在这种情况下稍后从数据中转换它：

var node = svg.selectAll(".node")
  .data(data)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", 'red')

现在我还没有设置x和y的位置，就根据数据中的transformX和transformY来翻译吧：

node.attr('transform', function(d) {
  console.log(d)
  return "translate(" + d.transformX + ',' + d.transformY + ')';
})

你去吧，屏幕上的节点依赖于数据。

var data = [{
  x: 100,
  y: 100,
  transformX: 22.9523886259546,
  transformY: 114.1646234701563
}, {
  x: 200,
  y: 200,
  transformX: 110.00281475549397,
  transformY: 114.1646234701563
}, {
  x: 300,
  y: 250,
  transformX: 22.9523886259546,
  transformY: 160.00281475549397
}]


var svg = d3.select("#container").append("svg")
  .attr("width", 400)
  .attr("height", 400);


var node = svg.selectAll(".node")
  .data(data)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", 'red')
  //.call(force.drag);

node.attr('transform', function(d) {
  console.log(d)
  return "translate(" + d.transformX + ',' + d.transformY + ')';
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='container'>

</div>

您可以使用 for 循环创建数据，然后将其传递给 D3 以显示节点。

例如：

var allData = [];
for (var i = 0; i < position.length; i++) {
  var pos = position[i];
  var thisData = {
    x: pos.x,
    y: pos.y
  }

  allData.push(thisData);

}

然后将allData 传递给D3 :) 但不要使用d.tranformX 进行翻译，您只需使用d.x and d.y 就像这样：

node.attr('transform', function(d) {
  return "translate(" + d.x + ',' + d.y + ')';
})

编辑

这里是你的节点和链接在正确的位置和不同颜色的链接：https://jsfiddle.net/reko91/ge6Lhfqr/

我使用色标为它们着色：var color = d3.scale.category10();

然后在每个链接上迭代：

.style("stroke", function(d,i){
   return color(i)
   })

请注意，由于未运行强制布局，因此未显示链接。当你有这样的链接数据时，它的作用是：

var links = [{
  source: 0,
  target: 1
}, {
  source: 1,
  target: 2
}];

它遍历数据并找到它对应的节点。所以而不是：

source:0;

然后是：

source:node0 //which is the node object