ツールチップをd3エリアチャートに追加

Question

誰かが例を持っているか、d3ヒントをエリアチャートに追加する方法は知っていますか？私は積み上げられたエリアチャートの一種を使用しています。

let blockedGen = d3.svg.area() 
      .x(function(d) { return x(d.projectDate); }) 
      .y0(height) 
      .interpolate("basis") 
      .y1(function(d) { return y(d.done + d.review + d.inprogress + d.blocked); }); 

     let todoGen = d3.svg.area() 
      .x(function(d) { return x(d.projectDate); }) 
      .y0(height) 
      .interpolate("basis") 
      .y1(function(d) { return y(d.done + d.review + d.inprogress + d.blocked + d.todo); }); 
var svg = d3.select(".demandChart").append("svg") 
      .attr("id","demandchart") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

let todoLayer = svg.append('svg:path') 
      .attr('d', todoGen(dataDemand)) 
      .attr("fill-opacity","1") 
      .attr('fill', 'rgb(49, 130, 189)'); 

     let blockedLayer = svg.append('svg:path') 
      .attr('d', blockedGen(dataDemand)) 
      .attr("fill-opacity",".7") 
      .attr('fill', 'rgb(158, 202, 225)'); 

おかげ

Answer 1

は、あなたのsvgにコードの下に追加var div = d3.select("#toolTip");

を追加します。

.on("mouseover", function(d) {  
     div.transition()  
     .style("opacity", .9);  
     div.html("Project Date: " + d.projectDate) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY) + "px"); 
    }).on("mouseout", function() { 
      div.transition()   
      .duration(500)  
      .style("opacity", 0);}); 

cssファイルでこれを追加します。

div.tooltip { 
    position: absolute; 
    padding: 10px; 
    background: #f4f4f4; 
    border: 0px; 
    border-radius: 3px; 
    pointer-events: none; 
    font-size: 11px; 
    color: #000; 
    line-height: 16px; 
    border: 1px solid #d4d4d4; 
}