将工具提示添加到 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

添加var div = d3.select("#toolTip");

将以下代码添加到您的svg ：

.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;
}