使用拖动行为拖动nvd3折线图

Question

我已经在nvd3工作了一段时间。

我面临一种情况，我需要使用鼠标拖动和对齐线图。 refer here for the pic

我使用了d3功能

   "d3.behaviour.drag().on("drag", move)"

并且移动功能将是

  function move(d) {

      d3.select(this)


      .transition()
  //.duration(500)
        .ease("linear")
        .attr("transform", function(d) {
          return "translate("+d3.event.x+")";
        });
  }

问题是这在nvd3图表中不起作用，因为d3.event.x不可用或者可能以不同的方式提供。我找不到拖拽的方法。

但是如果你把硬编码放在像

那么

return "translate(100)";

它的工作在图片中。

在这种情况下，任何人都可以帮助我找到nvd3中的d3.event.x功能。

任何帮助都会感激不尽。

Answer 1

我弄明白了这个问题。只需在变量中获取d3.event.x并将该变量传递给translate函数。它奏效了。

function move(d) {
 var xevent = d3.event.x;

 d3.select(this)
  .transition()
  .duration(500)
    .ease("linear")
    .attr("transform", function(d) {
      return "translate("+xevent+")";
    });
 }