d3 js drag, проблема перехода элемента - PullRequest
Новая
       37

d3 js drag, проблема перехода элемента

0 голосов
/ 18 марта 2020

Я пытаюсь сделать перетаскиваемый график. Но есть странная проблема, например, я перетаскиваю первую точку с 2020-1-2 на 2020-1-10, затем во второй раз, если я начинаю перетаскивать первую точку, значение переходит на первоначальное значение (2020-1-2 ). Тем не менее, для других точек это гладко, значение изменяется соответственно. введите описание изображения здесь

мой код драже: 

 function dragged (d, i) {
        const x = d3.event.x
        const mdate = new Date(xScale.invert(x).toISOString().substr(0, 10))
        console.log(x, mdate, _this.minX)
        _this.pos = mdate
        d3.select(this)
          // .attr('dx', (d3.event.pageX) + 'px')
          .attr('transform', d =>
            `translate(${xScale(mdate)},${yScale(_this.yValue(d))})`
          )
        const dateText = d3.select(this).select('tspan:last-of-type')
        const format = d3.timeFormat('%Y-%m-%d')
        dateText.text(format(mdate))
      }

Мои данные такие же: 

 data: [
        {
          taskname: 'new',
          mdate: new Date('2020-01-02'),
          milestone: 'cccc',
          statusColor: 'Green'
        },
        {
          taskname: 'new',
          mdate: new Date('2020-05-08'),
          milestone: 'ddddd',
          statusColor: 'Black'
        },
        {
          taskname: 'new',
          mdate: new Date('2020-03-02'),
          milestone: 'vvv',
          statusColor: 'green'
        },
        {
          taskname: 'new',
          mdate: new Date('2020-06-02'),
          milestone: 'rrrrrr',
          statusColor: 'red'
        }
      ]

я только сортирую данные в порядок в графике отображается каждый раз.

код события драже: 

taskEnter.on('mouseover', function (d) {
        d3.select(this).style('cursor', 'move')
      })
        .on('mouseout', function (d) {})
        .call(
          d3
            .drag()
            .on('start', dragstarted)
            .on('drag', dragged)
            .on('end', dragended)
        )

любой может мне помочь. Я долго тестировал, но могу понять, почему.

...