0
我在d3v4中有一個力有向圖，我想在每個節點周圍放置另一個更小的力圖。d3v4嵌套力圖
這是我想要做的一個例子，但這是在v3中。我基本上試圖從那裏採取這種模式，並沒有奏效。 http://bl.ocks.org/djjupa/5655723
我想通過在node.each內創建一個新的，但似乎沒有工作。
下面是我創建新節點的代碼 - 它看起來與成功實例化第一個forcegraph的代碼相同，但這是在d3節點組的d3.each函數中。
當我通過console.logging他們在滴答函數檢查childnodes，我看到它有一個單元素數組_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