我正在尝试在 mpld3 中实现一个滑块,就像之前的问题一样。
我正在尝试构建可拖动点示例来执行此操作。我在理解以下代码的工作原理时遇到了一些麻烦:
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
特别是,在这种情况下指的是什么。我最初认为我可以用where (在函数顶部)之d3.select(this)
类的东西替换。但这不起作用,如我制作的这个笔记本所示。(第二段代码不允许您拖动红点)。d3.select("#"+foo)
foo = this.props.id
draw()
万一我想做什么不清楚......看看这个笔记本。我制作了一个插件,允许水平拖动红色方块(滑块)。我想做的是拖动红点改变蓝点的位置。所以我想做类似的事情:
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"
and "#bluedot"
?
非常感谢。