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

당신은 당신이 enter 단계를 시작하기 전에 다음에 바인드 데이터를 selectAll 및 를 사용하여 selection을 만들어야합니다.

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에서 첫 번째 요소에 바인딩지고 한 후 제 2의 도시의 text 요소가 .enter() 단계에서 작성되는과 body에 추가된다는 점이다.

.data 가입 방법과 .select 및 .selectAll의 차이점을 이해하려면 thinking with joins article이 좋은 출발점이라고 생각합니다.