我正在尝试在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"
?非常感谢。
最佳答案
我知道这样做很简单。您可以在d3.select(this)
元素数组中找到感兴趣的特定元素,而不是obj
,如下所示:
d3.select(obj.elements()[0][i])
不过,必须有一个更漂亮的方法。