반응 형 d3.js 차트에 툴팁 추가

저는 javascript 및 d3.js를 사용하는 방법을 배우고 있습니다. 완벽하게 작동하는 툴팁을 사용하여 간단한 선 차트를 만들었습니다 (here 참조). 응답 성을 높이기로 결정 했으므로 템플릿을 사용하여 새 템플릿을 만듭니다 (here 참조). 응답은 괜찮지 만 툴팁 div를 추가 할 수 없습니다. 어떤 도움이 필요합니까? 여기반응 형 d3.js 차트에 툴팁 추가

코드의 조각 그것이 '문제 :

chart2.selectAll("dot")  
    .data(data)   
    .enter().append("rect")    
    .attr("width", 1) 
    .attr("height", 120)  
    .style("opacity", 0)  // set the element opacity 
    .style("stroke", "#6f6f6f") // set the line colour 
    .attr("xScale", function(d) { return xScale(d.date); })  
    .attr("yScale", function(d) { return yScale(d.close)-60; }) 
    .on("mouseover", function(d) 
    { 
    d3.select(this).attr("width", 1).style("opacity", .8) ; //il punto cambia al mousover (bellissmo) 

     div.transition()   
      .duration(70)  
      .style("opacity", .8) 
      .style("border", "1px");  
     div .html(formatTime(d.date) + "<br/>" + d.close) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 64) + "px");  
     })    
    .on("mouseout", function(d) {  

     d3.select(this).attr("r", 5.1).style("opacity", .0); 
     div.transition()   
     .duration(200)  
     .style("opacity", 0); 
    });

사업부는 여기 definied된다

var div = d3.select("#chart2").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0);

을하고 CSS에 있습니다

는

div.tooltip { 
    position: absolute;   
    text-align: center;   
    width: 95px;     
    height: 40px;     
    padding: 2px;    
    font: 15px arial; 
    font-weight: bold; 
    color: black;   
background: #f0f0f0; 
    pointer-events: none;   
}

출처

2014-05-21 andriatz

'div'란 무엇입니까? 정의 된 위치는 어디입니까? –

은 여기에서 정의됩니다. var div = d3.select ("# chart2"). append ("div") .attr ("class", "tooltip") .style ("opacity", 0); (나는 또한 질문을 편집했다. 명확히해라.) – andriatz

SVG에'div' 요소를 추가하고있다. 이것은 작동하지 않을 것입니다 - SVG에'div' 요소가 없습니다. HTML에 추가하거나'text' 엘리먼트를 사용하십시오. –

으로 사업부를 정의 "body"를 따라 선택하고 거기에 div를 덧붙입니다.

var div = d3.select('body').append("div") 
     .attr("id", "chart") 
     .attr("class", "tooltip") 
     .style("opacity", 0);

출처

2017-04-21 07:35:03 Manz

반응 형 d3.js 차트에 툴팁 추가

답변

관련 문제