Question

我有以下代码

JS：

var cities = [
    { name: "Moscow", x: 585, y: 565 },
    { name: "Kiev",   x: 735, y: 765 },
];

HTML：

<svg .....>
// My SVG code
</svg>

<script>
// d3.select("svg").append("text").text(cities[0].name).attr("x", cities[0].x).attr("y", cities[0].y).attr("font-size",18).attr("fill", "black");
// d3.select("svg").append("text").text(cities[1].name).attr("x", cities[1].x).attr("y", cities[1].y).attr("font-size",18).attr("fill", "black");

d3.select("svg").data(cities).enter().append("text").text(function(d) { return d.name; } ).attr("x", function(d) { return d.x; } ).attr("y", function(d) { return d.y; } ).attr("font-size",18).attr("fill", "black");
</script>

我是D3的新手。我试图将我注释掉的代码转换为一些代码，这些代码遍历我定义的数组。但是，我只获得了使用未注释掉的代码打印的最后一个元素。为什么以及如何纠正这个问题？

Answer 1

在开始selection阶段之前，您必须使用selectAll和然后将数据绑定到enter。

你想要的是这些内容：

d3.select("svg")
    .selectAll('text.city-name')
    .data(cities)
    .enter()
  .append("text")
    .classed('city-name', true)
    .text(function(d) { return d.name; } )
    .attr("x", function(d) { return d.x; } )
    .attr("y", function(d) { return d.y; } )
    .attr("font-size",18)
    .attr("fill", "black");

工作示例：Demo。

在您的情况下，发生的事情是现有的svg元素被绑定到city中的第一个元素，然后第二个城市的text元素被创建在{{ 1}}阶段并添加到.enter()。

要了解body加入的工作方式以及.data和.select的不同之处，我认为thinking with joins article是一个很好的起点。

D3数据未显示所有元素

1 个答案: