力シミュレーションのポリゴンでd3 voronoiポリゴンドラッグイベントがトリガされないのはなぜですか？

Question

この後、example、次のコードのポリゴンでイベントをトリガーしないのはなぜですか？

var data = [ 
 
    { 
 
    "index" : 0, 
 
     "vx" : 0, 
 
     "vy" : 0, 
 
      "x" : 842, 
 
      "y" : 106 
 
    }, 
 
    { 
 
     "index" : 1, 
 
     "vx" : 0, 
 
      "vy" : 0, 
 
      "x" : 839, 
 
       "y" : 56 
 
    }, 
 
    { 
 
     "index" : 2, 
 
      "vx" : 0, 
 
      "vy" : 0, 
 
       "x" : 771, 
 
       "y" : 72 
 
     } 
 
] 
 

 
var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 
    
 
var simulation = d3.forceSimulation(data) 
 
\t .force("charge", d3.forceManyBody()) 
 
\t .force("center", d3.forceCenter(width/2, height/2)) 
 
\t .on("tick", ticked); 
 
    
 
var nodes = svg.append("g").attr("class", "nodes"), 
 
    node = nodes.selectAll("g"), 
 
    polygons = svg.append("g").attr("class", "polygons"), 
 
    polygon = polygons.selectAll("polygon"); 
 

 
var voronoi = d3.voronoi() 
 
\t .x(function(d) { return d.x; }) 
 
\t .y(function(d) { return d.y; }) 
 
\t .extent([[0, 0], [width, height]]); 
 
    
 
var update = function() { 
 

 
    polygon = polygons.selectAll("polygon") 
 
    .data(data).enter() 
 
    .append("polygon") 
 
    .call(d3.drag() 
 
       .on("start", dragstarted) 
 
       .on("drag", dragged) 
 
       .on("end", dragended)); 
 

 
    node = nodes.selectAll("g").data(data); 
 
    var nodeEnter = node.enter() 
 
    \t .append("g") 
 
    \t .attr("class", "node"); 
 
    nodeEnter.append("circle"); 
 
    nodeEnter.append("text") 
 
    .text(function(d, i) { return i; }) 
 
    .style("display", "none"); 
 
    node.merge(nodeEnter); 
 
    
 
    
 
    simulation.nodes(data); 
 
    simulation.restart(); 
 

 
}(); 
 
    
 
function ticked() { 
 
\t var node = nodes.selectAll("g"); 
 
    var diagram = voronoi(node.data()).polygons(); 
 
\t polygon = polygons.selectAll("polygon"); 
 
    
 
    node.call(d3.drag() 
 
    .on("start", dragstarted) 
 
    .on("drag", dragged) 
 
    .on("end", dragended)); 
 
    
 
    polygon 
 
    .attr("points", function(d, i) { return diagram[i]; }); 
 
    
 
    polygon.call(d3.drag() 
 
       .on("start", dragstarted) 
 
       .on("drag", function(d) { console.log("drag"); }) 
 
       .on("end", dragended)); 
 
    node 
 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" }); 
 
} 
 

 
function dragstarted(d) { 
 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
 
    d.fx = d.x; 
 
    d.fy = d.y; 
 
} 
 

 
function dragged(d) { 
 
    d.fx = d3.event.x; 
 
    d.fy = d3.event.y; 
 
} 
 

 
function dragended(d) { 
 
    if (!d3.event.active) simulation.alphaTarget(0); 
 
    d.fx = null; 
 
    d.fy = null; 
 
}

svg { 
 
    border: 1px solid #888888; 
 
} 
 

 
circle { 
 
    r: 3; 
 
    cursor: move; 
 
    fill: black; 
 
} 
 

 
.node { 
 
    pointer-events: all; 
 
} 
 

 
.polygons { 
 
    fill: none; 
 
    stroke: #999; 
 
} 
 

 
text { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.1/d3.min.js"></script> 
 
<svg width="400" height="200"></svg>

があるため、更新機能のことですか？ g要素にネストされた円なしで試したが、それでも動作しません。私はそれがスコープのためだと推測していますが、なぜそれが例では動作するのかまだわかりませんが、ここではありません。 （また、ノードがティック関数で再びバインドする必要があるように思われる理由もわかりません）。

d3 voronoiと強制的なシミュレーションを使用して、ドラッグ、ツールチップ、マウスオーバー、およびその他のイベントのノードを簡単にターゲットに設定し、ノード（およびリンク）を動的に更新します。

Answer 1

なぜドラッグイベントはあなたが原因塗りのあなたの例として使用してきましたbl.ockで起こるポリゴン

上のトリガイベントをドラッグしていません。アウトラインをクリックすると、あなたのポリゴンのnoneに塗りつぶしを変更することにより、ドラッグイベントにのみトリガーされます。

あなたのポリゴンのあなたの塗りつぶしは、あなたのCSSでこのラインを使用するようnoneを維持したい場合：

.polygon { 
    fill: none; 
    pointer-events: all; 
    ...