javascript - Can't import d3-queue in React.js? Attempted import error: 'queue' is not exported from 'd3' (imported as 'd3')
问题描述
Trying to get an example working from https://bl.ocks.org/mbostock/4657115 with React.js.
I get the error: Attempted import error: 'queue' is not exported from 'd3' (imported as 'd3').
However after installing d3-queue
I tried the following imports in my component:
import * as d3queue from 'd3-queue';
import {queue} from 'd3-queue';
But neither resolve the error.
What am I missing? Or is there a deprecation that I have missed?
My code:
import React from 'react';
import * as d3 from 'd3';
import * as d3queue from 'd3-queue';
import * as topojson from 'topojson';
export default class CongressionalDistricts extends React.Component {
state = {
usData: null,
usCongress: null
}
componentWillMount() {
d3.queue()
.defer(d3.json, "us.json")
.defer(d3.json, "us_congress_113.json")
.await((error, usData, usCongress) => {
this.setState({
usData,
usCongress
});
})
}
componentDidUpdate() {
const svg = d3.select(this.refs.anchor),
{width, height} = this.props;
const projection = d3.geoAlbers()
.scale(1280)
.translate([width / 2, height / 2]);
const path = d3.geoPath(projection);
const us= this.state.usData,
congress = this.state.usCongress
svg.append("defs").append("path")
.attr("id", "land")
.datum(topojson.feature(us, us.objects.land))
.attr("d", path);
svg.append("clipPath")
.attr("id", "clip-land")
.append("use")
.attr("xlink:href", "#land");
svg.append("g")
.attr("class", "districts")
.attr("clip-path", "url(#clip-land)")
.selectAll("path")
.data(topojson.feature(congress, congress.objects.districts).features)
.enter().append("path")
.attr("d", path)
.append("title")
.text(function(d) { return d.id; });
svg.append("path")
.attr("class", "district-boundaries")
.datum(topojson.mesh(congress, congress.objects.districts, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
.attr("d", path);
svg.append("path")
.attr("class", "state-boundaries")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("d", path);
}
render() {
const { usData, usCongress } = this.state;
if (!usData || !usCongress) {
return null;
}
return <g ref="anchor" />
}
}
解决方案
如果您使用的是 D3.v5,您将在尝试使用时遇到相同的错误,d3.queue()
因为它已被替换为Promise.all()
.
以下是如何使用它的示例:
Promise.all([
d3.csv('data1.csv'),
d3.csv('data2.csv')
]).then( ([data1, data2]) => {
// do stuff
console.log(data1, data2);
}).catch(err => console.log('Error loading or parsing data.'))
您可以通过在终端上运行以下命令来找出您正在使用的 D3 版本:npm list d3
.
推荐阅读
- javascript - 在选择元素中设置默认选项并加载数据
- mqtt - MQTT + (protocolbuf / flatbuf) = DDS?
- python - 如何使用 ttk.style tkinter 更改滚动条的颜色
- angular - 在 Angular 10 中获取新的访问令牌后订阅未执行
- python - 从列表中的列表中获取项目
- reactjs - 如何在 Material UI 的 Slider 中将 null 设置为默认值
- php - 交易后如何在会员新闻感谢页面上添加 GA 跟踪
- scala - 如何使用 Amazon Deequ 检查“column1”的值是否在“column2”的值的 +-20% 范围内?
- android - 如何测试复选框可见性
- javascript - 隐藏 div 元素