如何在 dimple.js 中向图表的图例元素添加工具提示答案

【问题标题】：How to add a Tooltip to the legend elements of a chart in dimple.js如何在 dimple.js 中向图表的图例元素添加工具提示
【发布时间】：2016-07-14 15:21:16
【问题描述】：

我一直在寻找一种方法来为 dimple.js 中图表的图例元素添加工具提示，但没有成功。

有谁知道这样做的方法吗？

【问题讨论】：

标签： javascript d3.js data-visualization dimple.js

【解决方案1】：

没有为图例创建工具提示的内置方法，但是，在绘制之后，您可以选择所有形状并为每个形状创建一个工具提示。例如：

        // code creating one tooltip
div var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

// code that adds an event listener to each rectangle in your legend:
myLegend.shapes.selectAll("rect")
          .on("mouseover", function(d) {        
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(formatTime(d.date) + "<br/>"  + d.close)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

legend.shapes 的凹坑参考：legend.shapes

示例中的代码大部分来自 Mike Bostock 的示例：simple d3 tooltips

【讨论】：