d3을 사용하여 데이터를 업데이트 한 후 툴팁 요소를 추가하십시오.

Question

저는 툴팁 문제를 오랫동안 해결하려고 노력해 왔습니다. Stackoverflow를 통해 검색 한 결과, 기존 게시물의 솔루션을 함께 모으기에는 아직 지식이 부족하지 않은 것으로 생각됩니다. 난 당신이 모든 깨진 영광, 여기에서 볼 수있는 D3 차트 일하고 :

Link to broken chart.

기본 "글로벌"보기 작품. "US"버튼을 누르면 데이터가 올바르게 업데이트됩니다. 그러나 툴팁은 그렇지 않습니다. 미국의 데이터 세트에는 기본 전역 데이터 세트보다 많은 데이터 포인트가 있습니다. 데이터 포인트의 차이는 누락 된 정확한 툴팁 수입니다. 업데이트 선택을 사용하여 입력하는 툴팁에 액세스하는 데 어려움을 겪고 있습니다. 사용자가 클릭 할 때

이

d3.tsv("data/global.tsv", function(error, data) { 
     data.forEach(function(d){ 
     d.change = +d.change; 
     d.score = +d.score; 
}); 


//Create circles    
svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
     return xScale(d.change); 
    }) 
    .attr("cy", function(d){ 
     return yScale(d.score); 
    }) 
    .attr("r", 7) 
    .attr("class","chart") 
    .style("opacity",.8) 
    .style("fill", function(d) { 
     return d.code; 
    }) 
    .on("mouseover", function(d) { 
     var xPosition = parseFloat(d3.select(this).attr("cx")); 
     var yPosition = parseFloat(d3.select(this).attr("cy")); 

     //Update the tooltip position and value 
     d3.select("#tooltip") 
      .style("left", xPosition + "px") 
      .style("top", yPosition + "px") 
      .select("#brand") 
      .style("color", d3.select(this).style("fill")) 
      .text(d.brand); 

     d3.select("#tooltip") 
      .select("#change") 
      .text(d.change); 

     d3.select("#tooltip") 
      .select("#score") 
      .text(d.score); 

     //Show the tooltip 
     d3.select("#tooltip").classed("hidden", false);  //quickly apply or remove classes from an element 
     }) 

    .on("mouseout", function() { 

     //Hide the tooltip 
     d3.select("#tooltip").classed("hidden", true); //quickly apply or remove classes from an element 
     }) 

}); //this ends the code on the selected svg element 

코드의 블록은 아래 제대로 내 산점도를 업데이트 : 아래

I (이 지금까지 나를 위해 노력하고 있습니다) 기본보기를 생성하기 위해 사용하고있는 D3 코드를 찾을하시기 바랍니다 "미국"버튼 : 나는 미국의 선택에 내 툴팁을 업데이트하기 위해 동일한 형식을 사용하려고하면

d3.selectAll("#us_data").on("click", function() { 
    d3.tsv("data/us.tsv", function(error, data) { 
     data.forEach(function(d) { 
      d.change = +d.change; 
      d.score = +d.score; 
    }); 

    var circles = svg.selectAll("circle") 
     .data(data); 


    circles.enter() 
     .append("circle") 
     .attr("cx", function(d) { return xScale(d.change); }) 
     .attr("cy", function(d){ return yScale(d.score); }) 
     .attr("r", 7) 
     .attr("class","chart") 
     .style("opacity",.8) 
     .style("fill", function(d) { return d.code; }); 

    circles.transition() 
     .duration(500) 
     .attr("cx", function(d) { return xScale(d.change); }) 
     .attr("cy", function(d){ return yScale(d.score); }) 
     .attr("r", 7) 
     .attr("class","chart") 
     .style("opacity",.8) 
     .style("fill", function(d) { return d.code; }); 

그러나 아무 일도 발생하지 않습니다. 아직까지 기존의 컨벤션에서 벗어나기에 충분한 JavaScript (또는 d3)를 이해하지 못하기 때문에 이것이 내가 떨어지는 곳이라고 확신합니다.

var labels = d3.selectAll("#tooltip") 
     .data(data); 


    labels.enter() 
     .append("#tooltip") 
     .select("#brand") 
     .style("color", d3.select(this).style("fill")) 
     .text(d.brand); 

    labels.transition() 
     .duration(500) 
     .select("#brand") 
     .style("color", d3.select(this).style("fill")) 
     .text(d.brand); 


    labels.enter() 
     .append("#tooltip") 
     .select("#change") 
     .text(d.change); 

    labels.transition() 
     .duration(500) 
     .select("#change") 
     .text(d.change); 

    labels.enter() 
     .append("#tooltip") 
     .select("#score") 
     .text(d.score); 

나는 나의 HTML 페이지에 툴팁을 만들려면이 코드를 사용하고 있습니다 :

<div id="tooltip" class="hidden"> 
     <p>Brand: <strong><span id="brand">name</span></strong></p> 
     <p>Change: <span id="change">100</span></p> 
     <p>Score: <span id="score">100</span></p> 

    </div> 

어떤 조언을 크게 감사합니다.

Answer 1

최저

, 게일 Z 나는이 더 명확하게 볼 수 있도록 모든 물건과 함께 plunker를 작성했다. 나는 우리 동그라미에 그들을 다시 사용하기 위해 mouseover과 mouseout 함수를 고려했다. 변경된 코드는 다음과 같습니다.

circles.enter() 
    .append("circle") 
    .attr("cx", function(d) { return xScale(d.change); }) 
    .attr("cy", function(d){ return yScale(d.score); }) 
    .attr("r", 7) 
    .attr("class","chart") 
    .style("opacity",.8) 
    .style("fill", function(d) { return d.code; }) 
    .on("mouseover", mouseover) // added 
    .on("mouseout", mouseout); // added 

이 정보가 도움이되기를 바랍니다.