反應的應用程序：D3圖表沒有顯示

我做了一個簡單的React應用程序與可重複使用的條形圖。但是，DOM中沒有顯示任何內容。這裏是我的組件DataSeries：反應的應用程序：D3圖表沒有顯示

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是好的。什麼是問題？

來源

2016-11-06 Amit Tiwary

我進行了更改的scaleOrdinal函數爲：'d3.scaleOrdinal（）結構域（）範圍（）'。然後控制檯拋出一個錯誤，「xScale.rangeBand（）不是函數」。我也將它改爲'xScale.range（）'，但現在它不會將正確的參數發送給使用此DataSeries組件的另一個組件。所以我猜這是執行rangeRoundBand（）和rangeBand（）函數時遇到的一個問題。 –

我找到了解決我的問題的方法。 d3.scaleOrdinal().domain().rangeRoundBand()和rangeBand()是d3v3函數，而我正在使用d3v4。在V4相應的功能是： d3.scaleBand().domain().rangeRound().padding(）和 bandwith()

來源

2016-11-07 04:10:07

反應的應用程序：D3圖表沒有顯示

回答

相關問題