Question

使用d3和React我绘制了一条路径。在这条路径上，我有多个圆圈，只能沿着那条路径拖动。但是，当我的当前实现（有点）在该路径上有一个圆时有效。

（在dragStart上，无论位置如何，它都会在路径上移动到长度0，每当我拖动第二个圆圈时，它都会从前一个圆圈的位置开始）。

我的问题是：如何沿d3中的路径拖动多个圆圈（或w.e）？有没有办法根据当前圈子的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

Answer 1

这是对this example的快速修改，这使圈子可以拖动：

＆＃13;

 <ul class="timeline">
                        <li>
                            <div class="posted-date">
                                <span class="month">2007-2011</span>
                            </div><!-- /posted-date -->

                            <div class="timeline-panel wow fadeInUp">
                                <div class="timeline-content">
                                    <div class="timeline-heading">
                                        <h3>Bachelor degree certificate</h3>
                                        <span>BA(Hons) in UI Engineering, Arts University, Pabna, USA</span>
                                    </div><!-- /timeline-heading -->

                                    <div class="timeline-body">
                                        <p>I have completed UI Engineering degree from ABC University, Boston, USA at feel the charm of existence in this spot, which was creat.</p>
                                    </div><!-- /timeline-body -->
                                </div> <!-- /timeline-content -->
                            </div><!-- /timeline-panel -->
                        </li>

                        <li class="timeline-inverted">
                            <div class="posted-date">
                                <span class="month">2004-2006</span>
                            </div><!-- /posted-date -->

                            <div class="timeline-panel wow fadeInUp">
                                <div class="timeline-content">
                                    <div class="timeline-heading">
                                        <h3>Higher Secondary certificate</h3>
                                        <span>Typography Arts, FA College, New York, USA</span>
                                    </div><!-- /timeline-heading -->

                                    <div class="timeline-body">
                                        <p>From this college of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend.</p>
                                    </div><!-- /timeline-body -->
                                </div> <!-- /timeline-content -->
                            </div> <!-- /timeline-panel -->
                        </li>

＆＃13;

在d3中沿路径拖动

1 个答案: