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 + ')';
})

你去，屏幕上的节点取决于数据。

＆＃13;

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 + ')';
})

＆＃13;

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

＆＃13;

您可以使用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

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

1 个答案: