javascript - mpld3 自定义插件中的选择——制作 slider

Question

我正在尝试在 mpld3 中实现一个 slider ，很像 this previous question .

我正在尝试构建 draggable points example去做这个。我在理解以下代码的工作原理时遇到了一些麻烦:

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      d[1] = obj.ax.y.invert(d3.event.y);
      d3.select(this)
        .attr("transform", "translate(" + [d3.event.x,d3.event.y] + ")");
    }

特别是，this 在此上下文中指的是什么。我最初认为我可以将 d3.select(this) 替换为 d3.select("#"+foo) 之类的东西，其中 foo = this.props。 id(在 draw() 函数的顶部)。但这不起作用，如this notebook所示我做了。 (第二段代码不允许您拖动红点)。

如果我想做的事情不清楚...请查看 this notebook .我制作了一个允许水平拖动红色方 block ( slider )的插件。我想做的是拖动红点改变蓝点的位置。所以我想做类似的事情:

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      sliderPosition = obj.ax.x(d[0]);
      targetPosition = obj.ax.x(-d[0]); // inverted sign
      d3.select("#redsquare")
        .attr("transform", "translate(" + [sliderPosition,sliderObj.ax.y(d[1])] + ")");
      d3.select("#bluedot")
        .attr("transform", "translate(" + [targetPosition,targetObj.ax.y(d[1])] + ")");
    }

这个简单示例的预期行为是让蓝点在拖动时沿与红色方 block 相反的方向移动。问题是，我用什么来代替 "#redsquare" 和 "#bluedot"？

非常感谢。

Answer 1

我知道一个 hacky 方法来做到这一点。代替d3.select(this)，您可以在obj元素数组中找到您感兴趣的特定元素，如下所示:

      d3.select(obj.elements()[0][i])

不过，一定有更漂亮的方法。