d3.js соединяет несколько перетаскиваемых фигур - PullRequest
0 голосов
/ 26 октября 2018

Я новичок в D3.js и работаю над простым проектом D3.js, который должен соединить несколько перетаскиваемых прямоугольников. По сути, для соединения 5 прямоугольников с 4 линиями: https://codepen.io/marong125/pen/JmOqzL Прямо сейчас я столкнулся с некоторыми проблемами при перетаскивании более 2 объектов, после перетаскивания он будет сломан. Моя идея установить класс как «цель» и «источник» для генерации строк, как это:

     function drawLine () {
                    let preObj = scope.stateData[scope.stateData.length - 2];
                    let lineData = [
                        {x : parseInt(preObj.x) + 50, y : 25},
                        {x : parseInt(preObj.x) + 100, y : 25},
                    ]
                    scope.lines = svg.append('line')
                        .style('stroke', 'black')
                        .attr("stroke-width", 2)
                        .attr('id', 'line-' + preObj.id)
                        .attr('x1', lineData[0].x)
                        .attr('y1', lineData[0].y)
                        .attr('x2', lineData[1].x)
                        .attr('y2', lineData[1].y);

                        // console.log(scope.lines);
                        // console.log(lineData);
                }
and set on('drag', dragmove): 

  function dragmove(d) {
                d3.select(this)
                    .attr("x", d3.event.x)
                    .attr("y", d3.event.y);

                // console.log(d.id);
                // console.log(d3.select(this)[0][0].getAttribute('id'));

                let x = d3.event.x;

                let y = d3.event.y + 25;

                if (scope.lines != undefined) {
                    if (d3.select(this).attr('class') === 'source') {
                        scope.lines.attr("x1", x);
                        scope.lines.attr("y1", y);
                    } else {
                        scope.lines.attr("x2", x);
                        scope.lines.attr("y2", y);
                    }
                 }
              }

для динамического изменения координаты линии, однако, этот способ работает не очень хорошо, кто-нибудь может помочь мне с лучшим решением? Большое спасибо в продвинутом!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...