使用d3和React,我已经画了一条路径。在这条路径上,我有多个圆形,这些圆形只能沿着路径拖动。然而,我的当前实现只在路径上有一个圆圈时(有点)工作。
(在dragStart上它移动到路径上的长度0,而不管位置,在我拖动第二个圆圈时,它始终从上一个圆圈的位置开始)。
我的问题是:如何在d3中沿着路径拖动多个圆圈(或其他东西)?是否有一种方法根据当前圆圈的cx和cy获取路径上的currentLength位置?
(在dragStart上它移动到路径上的长度0,而不管位置,在我拖动第二个圆圈时,它始终从上一个圆圈的位置开始)。
我的问题是:如何在d3中沿着路径拖动多个圆圈(或其他东西)?是否有一种方法根据当前圆圈的cx和cy获取路径上的currentLength位置?
var currentLength = 0;
class MyComponent extends Component {
constructor(props) {
super(props)
currentLength = 0;
}
componentDidMount() {
var drag = d3.behavior.drag()
.on('drag', this.move);
var g = d3.select(this._base);
var circle = g.selectAll('circle').data(this.props.data);
var onEnter = circle.enter();
onEnter.append('circle')
.attr({
r: 10,
cx: (d) => d.x,
cy: (d) => d.y
})
.style('fill', 'blue')
.call(drag);
}
move(d) {
currentLength += d3.event.dx + d3.event.dy
if (currentLength < 0) {
currentLength = 0
}
var pointAtCurrentLength = d3.select('#path').node().getPointAtLength(currentLength)
this.cx.baseVal.value = pointAtCurrentLength.x;
this.cy.baseVal.value = pointAtCurrentLength.y;
}
render() {
return <g ref={(c)=>this._base=c}></g>
}
}
有些类似于这个例子,只是具备可拖动和多个圆圈:http://bl.ocks.org/mbostock/1705868
move
绑定到你的类上,所以分配this.cy/this.cx
可能不起作用。 - Michael Camden