reactjs - 如何结合 React 渲染 D3 Force-Bubble？

Question

我正在尝试将 d3 气泡示例从 d3-dominant 转换为 react-D3 组合。

• 我已经得到了在 React 中渲染的气泡
• 我无法让 d3 '.on('tick',...' 工作并以某种方式更新一些 '' 组件。

这是一个 D3 的主要示例： https ://codepen.io/mretfaster/pen/rqagXX 刻度函数是从 D3 到 D3+React 的翻译。勾号更新 cx & cy...

    let myTickFn = () => {
    circlesObj.attr("cx",d => d.x)
      .attr("cy",d => d.y)
  }

这是 D3+React 示例，我得到的最远的是 console.log on tick .. https://codepen.io/mretfaster/pen/mzyZPq?editors=0111 这就是我卡住的地方......

//setup simulation
    let sim = this.makeD3Simulation();
    sim.force("myCollide", d3.forceCollide(d => this.radiusScale(+d.sales)))
  .alpha(.5)
  .nodes(this.dummyData)
  .on('tick', this.resizeTick);

resizeTick 函数似乎没有像在 D3 主导示例中那样在 React 中传递事件或“d”值。

提前感谢任何可以提供帮助的人:)

标签： reactjsd3.jssvgdata-visualization