d3.select() 不返回任何東西

Question

我對 React 尤其是 d3 比較陌生。 我正在嘗試使用自定義字典編寫 d3 比例圖。 除了我使用 d3.select 將軸 label 添加到我的圖表的最后一部分之外，所有內容都顯示出來。 我的render()方法返回draw graph生成的html，如下圖。

 render(){
    return this.drawGraph();
  }

drawGraph(){
    return(
      <svg viewBox={`0 0 ${this.width} ${this.height}`} style={{maxWidth: `${this.width}px`, font: "10px sans-serif"}}>
        <g fill="steelblue">
          ${this.fruits.map(d =>
            <svg key={d.name}>
              <rect y={this.y(d.name)} x={this.x(0)} width={this.x(d.count) - this.x(0)} height={this.y.bandwidth()}></rect>
            </svg>)}
        </g>
        <g fill="white" textAnchor="end" transform={`translate(-6,${this.y.bandwidth()/2})`}>
          ${this.fruits.map(d =>
            <svg key={d.name}>
            <text y={this.y(d.name)} x={this.x(d.count)} dy="0.35em">{d.count}</text>
          </svg>)}
        </g>
        <g transform={`translate(0, ${this.margin.top})`}>
          {d3.select('g')
            .call(d3.axisLeft(this.y))
            .call(g => g.select(".domain").remove())
            .node()}
        </g>
    </svg>    
    );
  }

誰能告訴我為什么 d3.select() 子句返回為空？ 為什么它找不到它在里面的塊，我該如何解決這個問題？

Answer 1

您在g tag中調用d3.select('g') 。 這就是為什么它是空的。 嘗試在componentDidMount() （對於組件）或useEffect掛鈎（對於函數）中調用它。