问如何添加D3工具提示
EN

Stack Overflow用户

提问于 2016-04-11 20:47:24

回答 1查看 330关注 0票数 0

目前，我正在寻找D3样本，试图改变它，以添加工具提示https://plnkr.co/edit/stHnntCknDUs0Xw6MlQ2?p=preview，但不能自己管理它。

我想将工具提示和指针添加到这里，就像在http://c3js.org/samples/timeseries.html中一样

//Add tooltips 
     // Define the div for the tooltip
      var div = d3.select("body").append("div") 
          .attr("class", "tooltip")             
          .style("opacity", 0);

      // Add the scatterplot
    countryEnter.selectAll("dot")   
        .data(data)         
    .enter().append("circle")                               
        .attr("r", 5)       
        .attr("cx", function(d) { return x(d.date); })       
        .attr("cy", function(d) { return y(d.stat); })      
        .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(formatTime(d.date) + "<br/>"  + d.date)   
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

就是不能让它工作

d3.js

tooltip

回答 1

Stack Overflow用户

发布于 2016-04-11 22:14:50

您将鼠标悬停在错误的元素上。您正在将它们放在点上(这些点并不存在于您的数据中，因为您没有date属性)。

我所做的是将它们放在路径上，如下所示：

 countryEnter.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); })
       .on("mouseover", function(d) {   
          console.log(d)
            divTooltip.transition()     
                .duration(200)      
                .style("opacity", .9)
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px")
            .innerHTML(formatTime(d.date) + "<br/>"  + d.close) 

            })                  
        .on("mouseout", function(d) {       
            divTooltip.transition()     
                .duration(500)      
                .style("opacity", 0);   
        });

但是我仍然得到错误formatTime is not defined。但是在查看工具提示时，问题就解决了。因此，解决剩下的问题应该不难:)

更新的plunkr：https://plnkr.co/edit/zQY0Wen1plIMuwOMq3PE?p=preview

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36549120

复制

相似问题

问如何添加D3工具提示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加D3工具提示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加D3工具提示
EN