3
Dashコンポーネントを生成するためにReactでD3v4をインポートしようとしています。これは、これまでの私のコードです:予期しない名前空間のインポートインポート/名前空間なし
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
を使用してダッシュをprepublishしようとすると、エラーがスローされます。
error Unexpected namespace import import/no-namespace
そして、それは私がのオフに構築していますimport * as d3 from 'd3';
に戻って指します独自のコンポーネントを作成する際にPlotlyが提供する例です。
このソリューションを試してみました。私はちょうど 'd3-selection'(私が使っていたライブラリ)を自分の依存関係に加えなければなりませんでした。ありがとう! – user9004969
これを少し追加するだけで、ルールを無効にする非常に簡単な解決策は、 '// eslint-disable-next-line import/no-namespace'を使用し、次の行に' import * as d3 from 'd3'; ' – tgordon18