不确定 d3.json 中的回调是否被调用 [重复]

Question

我正在尝试使用 d3 选择一些元素，附加 g 并在 svg 内生成一个轴。

我已经调试了renderWeather 内部的每个步骤，似乎d3.json 确实被执行了，但我没有看到任何元素呈现。我不知道为什么。

import React, { Component } from 'react'
import * as d3 from 'd3'


 export default class Weather extends Component { 

 componentDidMount () {
    this.renderWeather()
 }

 componentDidUpdate () {
    this.renderWeather()
 }

 renderWeather = () => {

  const tmp = (d) => {
  const xScale = d3
  .scaleLinear()
  .domain([1, 10])
  .range([20, 470])

  const yScale = d3
  .scaleLinear()
  .domain([0, 40])
  .range([480, 20])

  const xAxis = d3
  .axisBottom()
  .scale(xScale)
  .tickSize(480)
  .ticks(8)

  d3.select(this.refs.container)
  .append('g')
  .attr('id', 'xAxisG')
  .call(xAxis)

  d3.select(this.refs.container)
  .append('rect')
  .style('width', 100)
  .style('height', 100)

// I haven't used any data, just trying to make it work first
}


  // dummy url here
  d3.json('https://google.com', tmp)
}

render() {
 return (
  <svg ref="container">
  </svg>
)

} }

我希望 xAxis 在底部，但在 <svg></svg> 内部什么也看不到，这是为什么？

Answer 1

D3.js D3-fetch module 使用 Fetch API 来处理 HTTP 请求。

因此，要加载和解析 JSON 对象，您需要解析在 then() 语句中返回的承诺。

d3.json('some-path').then(response => {
  console.log(response); 
  // handle the rest here
  tmp(response);
});

同样，renderWeather() 方法中来自tmp 的匿名函数应该在then() 语句中调用，因为图表的呈现取决于d3.json() 返回的数据。