Я новичок в 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);
}
}
}
для динамического изменения координаты линии, однако, этот способ работает не очень хорошо, кто-нибудь может помочь мне с лучшим решением? Большое спасибо в продвинутом!