d3v4ネスティングフォースグラフ

Question

私はd3v4にフォースディレクティッドグラフを持っており、私は各ノードの周りに別の小さなフォースグラフを配置したいと思います。

これは私がやりたいことの例ですが、これはv3にあります。私は基本的にそこからこのパターンを取ろうとしましたが、うまくいきませんでした。 http://bl.ocks.org/djjupa/5655723

node.eachの中に新しいものを作成することで実現すると思っていましたが、それは動作していないようです。

新しいノードを作成するコードは、最初のforcegraphを正常にインスタンス化するコードと同じですが、これはd3ノードグループのd3.each関数にあります。

子ノードをconsole.loggingで確認すると、定義されていない要素が3つある3要素配列を持つ単一要素配列_groupsがあります。うーん、それは問題だろうか？

135  console.log('instantiateChildForceGraph', parent, ix) 
136 
137  let subFg = d3.select(this) 
138  
139  parent.tokens.fixed = true 
140  parent.tokens.x = 0 
141  parent.tokens.y = 0 
142 
143  let icon_size = 16 
144 
145  let childNodes = parent.tokens.children 
146 
147  let childSimulation = d3.forceSimulation() 
148   .force('collide', d3.forceCollide((d) => { return 150 }).iterations(16)) 
149   .force('center', d3.forceCenter(window.innerWidth/2, window.innerHeight/2)) 
150   .force('link', d3.forceLink() 
151   .id((d) => { return d.index + 1 }) 
152   .distance(200) 
153   .strength(1)) 
154   .force('charge', d3.forceManyBody()) 
155   .force('x', d3.forceX()) 
156   .force('y', d3.forceY()) 
157   .alphaTarget(1) 
158 
159  let childNode = subFg.selectAll('.token') 
160   .data(childNodes, (d) => { return d.id }) 
161 
162  let childNodeEnter = childNode 
163   .enter() 
164   .append('g') 
165   .attr('class', 'token-node-' + parent.id) 
166   .attr('transform', (d) => { return 'translate(' + d.x + ',' + d.y + ')' }) 
167 
168  childNodeEnter 
169   .append('circle') 
170    .attr('class', (d) => { return 'token token-' + d.source }) 
171    .attr('r', 5) 
172    .style('fill', 'black') 
173    .style('stroke', 'black') 
174 
175  childNode.exit().remove() 
176 
177  // let childNode = subFg.select('g.token-node-' + parent.id) 
178  // .selectAll('.token') 
179  // .data(childNodes, (d) => { return d.id }) 
180  // .enter() 
181  //  .attr('transform', (d) => { console.log('d', d); return 'translate(' + d.x ? d.x : 0 + ',' + d.y ? d.y : 0 + ')' }) 
182  // .exit() 
183  //  .remove() 
184 
185  console.log('childSimulation', childSimulation) 
186  console.log('childNodes', childNodes) 
187 
188  console.log('no') 
189  childSimulation.nodes(childNodes) 
190  childSimulation.force('link').links() 
191  childSimulation.on('tick', function(d) { 
192   console.log('childnode', childNode) 
193   childNode.attr('transform', (d) => { return 'translate(' + d.x + ',' + d.y + ')' }) 
194  }) 
195  } 
196 

Answer 1

だからchildNodeを検査する時に、私は、この特定のコードが実際に未定義の3つの要素を返していました見ました。そこで、childNodeの選択プロセスを改良して、これらのサブノードのルート<g>要素を選択する必要がありました。

しかし、それだけでは問題ではありませんでした。私は実際にこれらの投稿を作成した後、すぐにそれを行いました。

しかし、はるかに分かりにくい別の問題がありました。すべてがうまくいきましたが、ブラウザでサブフォースアニメーションが見えませんでした。

おそらく何とかネストした力グラフだったので、それは約700ピクセルのオフセットでアニメーション化されていたので、私はそれを見ることができませんでした。これは、オフセットの距離を打ち消すために変換関数を単に変更することによって解決されました。