D3数据没有显示所有的元素

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

你必须使用selectAll和然后数据绑定到它创建一个selection，然后才能开始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元素获得在.enter()阶段创建并添加到body。

要了解如何加入.data以及如何.select和.selectAll不同，我认为thinking with joins article是一个很好的开始。