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()语句中返回的Promise。

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

同样，tmp方法中renderWeather()中的匿名函数应在then()语句中调用，因为图表的呈现取决于{ {1}}。

不确定d3.json内部的回调是否被调用

1 个答案: