D3 v4ドラッグ可能な要素をクリック

Question

私はノードではなくDOMアイテムで力グラフを作成しましたが、ここでクリックするとexempleの中心をクリックすることができます。グラフ全体がドラッグ可能ですが、ドラッグが暗示されている限り、ドラッグ可能な要素をクリックすることはできません。

この例ではすべてが動いていますが、alert（）はイメージ要素にトリガされません。 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-ドラッグが「ドラッグ」イベントをトリガするために「mounsemove」イベントを使用していますです。しかし、Windows上のChromeでは、ノードをクリックしても常に 'mousemove'イベントが発生します。

それはクロームのバグです：だからクリックイベントは（https://github.com/search?utf8=%E2%9C%93&q=d3-dragはその文書を参照してください）：D3-ドラッグすることにより停止したhttps://bugs.chromium.org/p/chromium/issues/detail?id=161464 11月、2012年に作成されますが、1月30日に「固定」とマークされた、2017年には、だから私はChromeをチェックします本当にアップデートが見つかりました。 Chromeをバージョン56.0にアップデートした後、バグは消えてしまった...バグが4年後に修正されたことは素晴らしいことだ。

ただし、時間の経過とともにChromeが更新されるようにしましょう。