Форматирование внутренней компоновки силы: как перетащить внутренние узлы

Question

Я работаю над приложением с силовым расположением на больших кругах. Каждому узлу в этом силовом макете я прикрепляю другой силовой макет меньших кругов, которые появляются внутри больших кругов (fiddle here).

Схема расположения D3.js позволяет одним перетаскивать узлы с помощью мыши. Однако, хотя меньшие внутренние круги перемещаются относительно больших внешних окружностей из-за внутренних силовых макетов, я не могу перетащить внутренние круги каким-либо образом, которые кажутся независимыми от больших кругов. То есть перетаскивание внутреннего круга точно так же, как перетаскивание внешнего круга. (Установка свойства fixed данных, прикрепленных к внешнему узлу, не помогает - как в this slightly more complicated fiddle.)

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

Answer 1

Когда вы перетаскиваете внутренний круг, вы также отправляете события drag на внешние узлы (потому что они перекрываются). Чтобы этого не произошло, вам нужно использовать d3.event.stopPropagation() для вашего сопротивления.

var innerAnodes = aNode.selectAll("g.inner") 
    .data(innerAdata, function (d) {return d.id;}) 
    .enter() 
    .append("g") 
    .attr("class", "inner") 
    .attr("id", function (d) {return d.id;}) 
    .call(innerAlayout.drag() 
     .on("dragstart", function(){    
      d3.event.sourceEvent.stopPropagation(); 
     }) 
     ); 

Адрес fiddle updated.