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

示例中的代码主要是从Mike Bostock的例子中复制而来的：simple d3 tooltips

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

1 个答案: