我正在尝试使用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>这是为什么？
D3.js D3-fetch模块使用Fetch API来处理HTTP请求。
因此，要加载和解析JSON对象，您将需要解析在then()语句中返回的Promise。
d3.json('some-path').then(response => {
console.log(response);
// handle the rest here
tmp(response);
});
同样，匿名函数的tmp，在范围内renderWeather()的方法，应该在内部调用then()语句，因为图表的呈现是依赖于返回的数据d3.json()。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句