D3 v4 нажмите на элементы, которые можно перетаскивать

Question

Я создал график силы с элементами DOM, а не узлами, но теперь я хочу, чтобы у вас есть возможность щелкнуть по ним, чтобы наделить центр тем, на который я нажимаю. Весь график можно перетаскивать, но пока подразумевается перетаскивание, я не могу щелкнуть элементы, которые можно перетаскивать, если я прокомментирую функции перетаскивания, которые я могу щелкнуть, просто отлично.

В этом примере все перемещается, но предупреждение() не срабатывает, если оно находится на элементе изображения. Если я удаляю перетаскивание из элемента newNode, срабатывает alert().

function restart() { 
       //If there were already created nodes, remove them 
       if (created) { 
        created.remove(); 
       } 

       // Apply the general update pattern to the nodes. 
       node = node.data(self.nodes(), function(d) { return d.id; }); 

       //Add a group 
       //When dragged you're not able to click on anything 
       var newNode = node.enter().append("g").attr("class", "node").attr("transform", "translate(-42,-55)").call(d3.drag() 
         .on("start", dragstarted) 
         .on("drag", dragged) 
         .on("end", dragended)); 

       //Add background rect 
       nodeSquare = newNode.append("rect") 
       .attr("width", "84px") 
       .attr("height", "110px") 
       .style("fill", 'red'); 

       //Add an image 
       imageNode = newNode.append("image") 
         .attr("xlink:href", function (d) { return d.imageUrl; }) 
         .attr("transform", "translate(2,2)") 
         .attr("height", 80) 
         .attr("width", 80); 

       imageNode.on("click", function (d) { alert("center me!"); d3.event.stopPropagation();}); 
       //TODO: ALIGN CENTER 
       //.attr("x", function(d){ if(d.name == self.entityData.properties.Title) return 0;}).attr("y", function(d){ if(d.name == self.entityData.properties.Title) return 0;}) 

       //Add text 
       nodeText = newNode.append("a") 
        .attr("width", 2) 
        .attr("word-wrap", "break-word") 
        .attr("height", 10) 
        .attr("href", function (d) { if (d.href) return d.href; else return "https://i.ytimg.com/vi/jhvAXT9R_3U/hqdefault.jpg"; }) 
        .style('stroke', 'white') 
        .append("text").text(function (d) { return d.name.substring(0, 10); }).attr("dy", function (d) { return +100 }).attr("dx", function (d) { return +10; }); 
       //Change the text style to be less thick 
       nodeText.style("stroke-width", 0.5).style("font-size", "12px"); 

       //save the created nodes to be able to delete them as soon as this function is called upon again 
       created = newNode; 

       // Apply the general update pattern to the links. 
       link = link.data(self.links()); 
       link.exit().remove(); 
       link = link.enter().append("line").merge(link); 

       // Update and restart the simulation. 
       simulation.nodes(self.nodes()); 
       simulation.force("link").links(self.links()); 
       simulation.alpha(1).restart(); 
      } 

Answer 1

Основная причина: d3-drag использует событие «mounsemove» для запуска события «перетащить». Но в Chrome в Windows событие «mousemove» всегда запускается, просто щелкнув узел. Таким образом, нажмите событие было остановлено d3-сопротивление (см его документ: https://github.com/search?utf8=%E2%9C%93&q=d3-drag)

Это ошибка в Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=161464 , который был создан в ноябре 2012 года, но с пометкой «фиксированные» на 30 января, 2017. Так что я проверил Chrome и действительно нашел обновление. После того, как я обновил Chrome до версии 56.0, ошибка исчезла ... Удивительно, что ошибка получила исправление через 4 года.

Однако, давайте пожелаем, чтобы люди обновили свой Chrome вовремя.