反应的应用程序：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是好的。什么是问题？

我进行了更改的scaleOrdinal函数为：'d3.scaleOrdinal（）结构域（）范围（）'。然后控制台抛出一个错误，“xScale.rangeBand（）不是函数”。我也将它改为'xScale.range（）'，但现在它不会将正确的参数发送给使用此DataSeries组件的另一个组件。所以我猜这是执行rangeRoundBand（）和rangeBand（）函数时遇到的一个问题。 –

答

我找到了解决我的问题的方法。 d3.scaleOrdinal().domain().rangeRoundBand()和rangeBand()是d3v3函数，而我正在使用d3v4。在V4相应的功能是： d3.scaleBand().domain().rangeRound().padding(）和 bandwith()

反应的应用程序：D3图表没有显示

相关推荐