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()

反应应用程序：D3图表未显示

1 个答案: