如何將工具提示添加到圖表的圖例元素中dimple.js

Question

我已經有相當長的一段時間了，已經在尋找一種將工具提示添加到dimple.js中圖表的圖例元素但沒有成功的方法。

有沒有人知道一種方法來做到這一點？

Answer 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

中的示例代碼主要由麥克·博斯托克的例子複製：simple d3 tooltips