如何在 D3 中单击时冻结和解冻悬停线答案

【问题标题】：How to freeze and unfreeze hover line on click in D3如何在 D3 中单击时冻结和解冻悬停线
【发布时间】：2015-04-17 23:49:57
【问题描述】：

我和我的朋友都使用 D3 创建了一个图表，我们将它组合在一起看起来像这样：http://jsfiddle.net/vertaire/vba1ryzp/5/

我们希望删除滑块并将其替换为折线图中的线悬停。当前，只要您移动鼠标，悬停线就会返回年份。

  chart1.append('svg:rect') // append a rect to catch mouse movements on canvas
  .attr('width', chart1_width) // can't catch mouse events on a g element
  .attr('height', chart1_height)
  .attr('fill', 'none')
  .attr('pointer-events', 'all')
  .on('mouseout', function(){ // on mouse out hide line, circles and text
        d3.select(".mouseLine")
            .style("opacity", "0");
        d3.selectAll(".mouseCircle circle")
            .style("opacity", "0");
      d3.selectAll(".mouseCircle text")
            .style("opacity", "0");
  })
  .on('mouseover', function(){ // on mouse in show line, circles and text
        d3.select(".mouseLine")
            .style("opacity", "1");
         d3.selectAll(".mouseCircle circle")
            .style("opacity", "1");
        d3.selectAll(".mouseCircle text")
            .style("opacity", "1");
  })
  .on('mousemove', function() { // mouse moving over canvas
      d3.select(".mouseLine")
      .attr("d", function(){
          yRange = y.range(); // range of y axis
          var xCoor = d3.mouse(this)[0]; // mouse position in x
          var xDate = x.invert(xCoor); // date corresponding to mouse x 
          d3.selectAll('.mouseCircle') // for each circle group
              .each(function(d,i){
                 var rightIdx = bisect(data[1].values, xDate); // find date in data that right off mouse
                 yVal = data[i].values[rightIdx-1].VALUE;
                 yCoor = y(yVal); 
                 var interSect = get_line_intersection(xCoor,  // get the intersection of our vertical line and the data line
                      yRange[0], 
                      xCoor, 
                      yRange[1],
                      x(data[i].values[rightIdx-1].YEAR),
                      y(data[i].values[rightIdx-1].VALUE),
                      x(data[i].values[rightIdx].YEAR),
                      y(data[i].values[rightIdx].VALUE));

              d3.select(this) // move the circle to intersection
                  .attr('transform', 'translate(' + interSect.x + ',' + interSect.y + ')');

              d3.select(this.children[1]) // write coordinates out
                  .text(xDate.getFullYear() + "," + yVal);
                  yearCurrent = xDate.getFullYear();
                  console.log(yearCurrent)
                  return yearCurrent;

              });

          return "M"+ xCoor +"," + yRange[0] + "L" + xCoor + "," + yRange[1]; // position vertical line
      });
  });  

});

我想知道如何做到这一点，以便当我执行鼠标单击时，它会将悬停线冻结在当前位置，返回冻结位置的年份，并在我再次单击时将其解冻？

【问题讨论】：

标签： javascript d3.js bar-chart linegraph

【解决方案1】：

是的，http://jsfiddle.net/vertaire/vba1ryzp/6/

基本上添加了全局变量frozen，它在点击时切换，mousemove函数仅在其解冻状态时才起作用。

var frozen = false;

...

 .on('click', function(){ // on mouse click toggle frozen status
            frozen = !frozen;
      })


.on('mousemove', function() { // mouse moving over canvas
      if(!frozen) {
      ...
      }
  });

【讨论】：