React App：D3チャートが表示されない

Question

私は再利用可能な棒グラフで簡単なReactアプリを作った。しかし、DOMには何も表示されません。ここに私のコンポーネントDataSeriesです：

コンソールは、次のエラーを投げている

render: function() { 
var props = this.props; 

var yScale = d3.scaleLinear() 
    .domain([0, d3.max(this.props.data)]) 
    .range([0, this.props.height]); 

var xScale = d3.scaleOrdinal() 
    .domain(d3.range(this.props.data.length)) 
    .rangeRoundBands([0, this.props.width], 0.05); 

var bars = this.props.data.map(function(point, i) { 
    return (
    <Bar height={yScale(point)} width={xScale.rangeBand()} offset={xScale(i)} availableHeight={props.height} color={props.color} key={i} /> 
) 
}); 

return (
    <g>{bars}</g> 
);} 

： DataSeries.js:41 Uncaught TypeError: d3.scaleOrdinal(...).domain(...).rangeRoundBands is not a function at Constructor.render (webpack:///./src/DataSeries.js?:41:77) at eval (webpack:///./~/react/lib/ReactCompositeComponent.js?:793:21) at measureLifeCyclePerf (webpack:///./~/react/lib/ReactCompositeComponent.js?:74:12) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack:///./~/react/lib/ReactCompositeComponent.js?:792:27) at ReactCompositeComponentWrapper._renderValidatedComponent (webpack:///./~/react/lib/ReactCompositeComponent.js?:819:34) at ReactCompositeComponentWrapper.performInitialMount (webpack:///./~/react/lib/ReactCompositeComponent.js?:361:30) at ReactCompositeComponentWrapper.mountComponent (webpack:///./~/react/lib/ReactCompositeComponent.js?:257:21) at Object.mountComponent (webpack:///./~/react/lib/ReactReconciler.js?:47:35) at ReactDOMComponent.mountChildren (webpack:///./~/react/lib/ReactMultiChild.js?:240:44) at ReactDOMComponent._createInitialChildren (webpack:///./~/react/lib/ReactDOMComponent.js?:699:32)

なぜd3.scaleOrdinal（）domain.rangeRoundBands（）関数ではないですか。？その行までコードを処理しているので、d3.scaleLinearは問題ないと思います。どうした？

Answer 1

私の問題の解決策が見つかりました。 d3.scaleOrdinal().domain().rangeRoundBand()とrangeBand()はd3v3関数ですが、私はd3v4を使用しています。 V4に対応する機能は、次のとおり d3.scaleBand().domain().rangeRound().padding(）と

bandwith()