javascript - ReactJS/D3 - 在使用 D3 的不同组件上使用 .selectAll

Question

我需要从d3另一个组件的代码中获取一些元素，但我不确定如何执行此操作。

我不确定我是否正确地处理了这个问题，但这就是我到目前为止所拥有的。

在我的helpers.tsx我有这个

const createStack = (
  chart: d3.Selection<SVGGElement, unknown, null, undefined>,
  dataset: Dataset[],
  stackSeries: d3.Series<
    {
      [key: string]: number
    },
    string
  >[],
  area: d3.Area<[number, number]>,
  line: any
) => {
  let stack = chart.append('g').attr('class', 'stack')
  let colorMap = new Map()
  dataset.forEach((set) => {
    colorMap.set(set.id, set.color)
  })

  stack
    .selectAll('path')
    .data(stackSeries)
    .enter()
    .append('path')
    .attr('class', css.stack)
    .attr('fill', (d: any) => {
      return colorMap.get(d.key) + '30'
    })
    .attr('d', (d: any) => area(d))

  chart
    .append('g')
    .selectAll('path')
    .data(stackSeries)
    .enter()
    .append('path')
    .attr('class', css.line)
    .attr('stroke', (d: any) => {
      return colorMap.get(d.key)
    })
    .attr('fill', 'none')
    .attr('d', (d: any) => line(d))
    .on('mouseover', function (d: any, i) {
      d3.select(this).style('stroke-width', '10px')
      something()
      console.log(d.srcElement.__data__.key)
    })
    .on('mouseout', function (d: any, i) {
      d3.select(this).style('stroke-width', '1px')
    })
}

我想.selectAll在另一个组件上使用，这样我就可以在那里做这部分

    .on('mouseover', function (d: any, i) {
      d3.select(this).style('stroke-width', '10px')
      something()
      console.log(d.srcElement.__data__.key)
    })
    .on('mouseout', function (d: any, i) {
      d3.select(this).style('stroke-width', '1px')
    })

这可能吗？我已经尝试过了，但我似乎根本无法获得任何元素（可能是因为我试图在元素存在之前检索它们？）

标签： javascriptreactjsd3.js