mpld3 中自定义插件中的选择——制作滑块答案

【问题标题】：Selections in custom plugins in mpld3 -- Making a slidermpld3 中自定义插件中的选择——制作滑块
【发布时间】：2014-09-08 01:46:46
【问题描述】：

我正在尝试在 mpld3 中实现一个滑块，很像 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。我制作了一个插件，允许水平拖动红色方块（滑块）。我想做的是拖动红点改变蓝点的位置。所以我想做这样的事情：

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])] + ")");
    }

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

非常感谢。

【问题讨论】：

如果这个标签被标记为mpld3，那就太好了，那么有足够能力添加标签的人可以考虑这样做吗？
感谢@Phillip Cloud！

标签： javascript d3.js matplotlib mpld3

【解决方案1】：

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

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

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

【讨论】：