我正在尝试在React中导入D3v4以生成Dash组件。到目前为止这是我的代码:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import * as d3 from 'd3';
function createBox(divId) {
var svgContainer = d3.select(divId).append('svg')
.attr('width', 200)
.attr('height', 200);
//Draw the Circle
svgContainer.append('circle')
.attr('cx', 30)
.attr('cy', 30)
.attr('r', 20);
}
/**
* ExampleComponent is an example component.
* It takes a property, `label`, and
* displays it.
* It renders an input with the property `value`
* which is editable by the user.
*/
export default class ExampleComponent extends Component {
constructor() {
super();
this.plot = this.plot.bind(this);
}
plot(props) {
createBox(props.id);
}
componentDidMount() {
this.plot(this.props);
}
componentWillReceiveProps(newProps) {
this.plot(newProps);
}
render() {
const {id} = this.props;
return (
<div id={id}/>
);
}
}
ExampleComponent.propTypes = {
/**
* The ID used to identify this compnent in Dash callbacks
*/
id: PropTypes.string
};
但是当我尝试使用$ npm run prepublish
预先发布Dash时,它会抛出错误:
error Unexpected namespace import import/no-namespace
它指向import * as d3 from 'd3';
我正在建立Plotly提供的关于编写自己的组件的示例。
如esling Docs中所述:
报告是否使用名称空间导入。
所以你应该把它改成这个:
import d3 from 'd3';
如果必须使用命名空间,则禁用该规则(如eslint docs中所述)
更新
阅读docs of d3后,他们使用相同的模式,所以我假设default
没有d3
出口因此:
import d3 from 'd3';
可能行不通。 然后对这样的个人部分使用命名导入:
import {scaleLinear} from "d3-scale";
或者禁用我上面提到的规则。