Question

我在d3v4中有一个力导向图，我想在每个节点周围放置另一个较小的力图。

这是我想要做的一个例子，但这是在v3中。我基本上试图从那里采取这种模式，但它没有用。 http://bl.ocks.org/djjupa/5655723

我想通过在node.each内创建一个新的来实现这一目标，但这似乎没有用。

这是我创建新节点的代码 - 它看起来与成功实例化第一个forcegraph的代码相同，但这是在d3节点组的d3.each函数中。

当我通过console.logging它们在tick函数中检查子节点时，我看到它有一个单元素数组_groups，它有一个3元素数组，其中有3个未定义的元素。嗯 - 这可能是问题吗？

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像素的偏移动画它，所以我根本看不到它。通过简单地改变变换函数以抵消偏移的距离来解决这个问题。

d3v4嵌套力图

1 个答案: