D3.js 툴팁에 값이 업데이트되지 않았습니다.

Question

다른 d3.js 문제가 있습니다. 나는 choropleth 맵을 가지고 있고 마우스 오버 기능에서 커뮤니티의 올바른 가치를 보여주는 툴팁을 원합니다. 거의 완벽하게 작동합니다. 한 가지 문제 만 있습니다. 값의 "업데이트"가 없습니다. 모든 카운티에서는 동일합니다. 누군가 나를 위해 대답을 주길 바랍니다. 고맙습니다.

var feature = group.selectAll("path") 
    .data(collection.features) 
    .enter() 
    .append("path") 
    //.transition() 
    //.duration(9000) 
    .attr("fill",function(d) { 

     //Get data value 
     var value = d.properties.EINWOHNER; 
     //console.log(value); 

     if (value) { 
       //If value exists… 
       return color(value); 
     } 
     else { 
       //If value is undefined… 
       return "none"; 
     } 
    }) 

    .on("mouseover", function(d) { 

     d3.select("#tooltip") 
      .data(collection.features) 
      .select("#value") 
      .text(function(d){ 
       return d.properties.EINWOHNER; 
      }); 

     //Show the tooltip 
     d3.select("#tooltip").classed("hidden", false); 
    }) 

    .on("mouseout", function() { 

     //Hide the tooltip 
     d3.select("#tooltip").classed("hidden", true);       
    }); 

Answer 1

은 당신은 그들 각각의 #value DOM 요소에 바인딩 된 데이터의 값을 받고있어

.text(d.properties.EINWOHNER); 

을, 텍스트를 설정 사용하려면 : 여기

내 코드입니다 . 이미 데이터를 전달할 필요가 없습니다. 현재 데이터는 d입니다. 따라서 전체 코드는 다음과 같습니다.

.on("mouseover", function(d) { 
    d3.select("#tooltip") 
     .text(d.properties.EINWOHNER); 
    d3.select("#tooltip").classed("hidden", false); 
})