данные 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

Вы должны создать 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 элемента получает создан в .enter() фазе и добавляют к body.

Чтобы понять, как .data присоединяющиеся работает и как .select и .selectAll отличаются, я думаю thinking with joins article это прекрасное место, чтобы начать.