Question

我是D3JS的新手并创建了一步一行的图表，如下所示。现在我想将鼠标悬停效果添加到图表中。当用户将鼠标悬停在水平步骤线上时，它应突出显示不同的颜色（如图中的绿色所示），并显示工具提示。

我一直在对此进行一些研究，到目前为止，我已经找到了在鼠标悬停时更改点（在线交叉处）颜色的示例。但我没有找到任何强调步骤线本身的例子。

如果有人可以指出我正确的方向或提供示例，我将不胜感激。谢谢。

  var line = d3.svg.line()
                .interpolate("step-after")
                .x(function(d) { return x(d.timestamp); })              
                .y(function(d) { return y(d.score); });

  svg.append("path")
          .datum(data)
          .attr("class", "lineblue")
          .attr("d", line);

Answer 1

基于@ JSBob的评论，我在鼠标悬停时在原始步骤线上添加了另一行覆盖。以下是最终结果。

  var bisectDate = d3.bisector(function(d) { return d.start; }).left,

   var highlightLine = d3.svg.line()                            
                        .x(function(d) { return x(d.start); })              
                        .y(function(d) { return y(d.score); });

   var highlight = focus.append("g")                         
                      .style("display", "none");

   var highlightPath = highlight.append("path")                         
                         .attr("class", "highlightgreen");

   focus.on("mouseover", mouseover)
         .on("mouseout", function() { 
                   highlight.style("display", "none"); 
                    tooltip.style("display", "none"); 
         });

   var tooltip = d3.select("body").append("div")
                  .attr("class","tooltip")
                   .style("display", "none");
    function mouseover() {
          var highlightData = [];
          var x0 = x.invert(d3.mouse(this)[0]);
          var i = bisectDate(appData, x0, 1);
          var d0 = appData[i - 1];      
          highlightData.push({ start: d0.start, score: d0.score});
          highlightData.push({ start: d0.end, score: d0.score});
          highlight.style("display", "block")
                       .select("path")                                                                                  
                           .attr("class", "highlightgreen")
                            .attr("d",highlightLine(highlightData));

         var tooltipX =  (x(d0.end) - x(d0.start))/2 + x(d0.start) + 26;
         var tooltipY = y(d0.score) - 12;
         tooltip.html('Test')    
                   .style("left", tooltipX + "px")           
                   .style("top", tooltipY + "px")
                   .style("display","block");

      }

d3js后续行图 - 鼠标悬停时两点之间的高亮线

1 个答案: