d3js zoom + drag вызывает конфликт

114
14

Я пытаюсь применить поведение масштабирования к svg, где некоторые элементы в svg уже связаны с поведением перетаскивания. без эффекта масштабирования перетаскивание работает нормально, без масштабирования по тренду отлично работает. Когда у меня есть оба, это конфликты. Когда я перетаскиваю круг, все остальные круги начинают перетаскивать его.

Вот скрипка.

может ли кто-нибудь помочь мне разобраться с проблемой?

<svg height="600" width="600" style="background: black">

<g>
<rect x="0" y="0" , width="600" height="40" style="fill:gold;"></rect>
<circle id='drag' cx="15" cy="20" init-cx="15" init-cy="20" r="10"
style="stroke: white; stroke-width: 2px; fill:blue"/>

</g>

<g id="playground">
<g>
<circle class='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
<circle class='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
<circle class='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
</g>

var zoom = d3.behavior.zoom()
.scaleExtent([-1, 8])
.on("zoom", function () {

var graph = d3.select('svg');

graph
.select('#playground')
.selectAll('circle')
.select(function () {
return this.parentNode;
})
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});

var move = d3.behavior.drag()

.on('drag', function () {

console.log('dragging');

var curr = d3.select(this)
.attr({
cx: d3.mouse(this)[0],
cy: d3.mouse(this)[1]
})

})
.on('dragend', function () {

var curr = d3.select(this);

d3.select('#playground')
.append('circle')
.attr({
cx: curr.attr('cx'),
cy: curr.attr('cy'),
r: curr.attr('r')
})
.style({
fill: 'white',
stroke: 'red',
'stroke-width': '2px'
})
;

curr.attr({
cx: curr.attr('init-cx'),
cy: curr.attr('init-cx')
});
})
;

d3.select('#drag').call(move);

d3.select('.top')
.call(d3.behavior.drag().on('drag', function () {
d3.select(this)
.attr({
cx: d3.mouse(this)[0],
cy: d3.mouse(this)[1]
})
;
}));
d3.select('svg').call(zoom);

спросил(а) 2015-11-25T14:26:00+03:00 4 года, 10 месяцев назад
1
Решение
70

Я реализовал индивидуальное перетаскивание узлов, работающих вместе с общей функцией масштабирования и панорамирования. Используется stopPropagation события в событии dragstart из кругов.

Надеюсь это поможет.

var move = d3.behavior.drag()
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation();
});

Рабочий JSFiddle

ответил(а) 2015-11-25T15:00:00+03:00 4 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема