javascript - D3 条形图未捕获类型错误

我正在尝试使用 d3 版本 4 制作 d3 条形图，它给了我以下错误:Uncaught TypeError: d3.scaleOrdinal(...).domain(...).rangeBands is not a function,我添加了我的代码片段，有人可以为我修复它吗？

var bardata = [20, 30, 95,15];
var height = 400,
    width = 600,
    barWidth = 50,
    barOffset = 5;

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

var xScale = d3.scaleOrdinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width])

d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')
.style('fill', '#C61C6F')
.attr('width', xScale.rangeBand())
.attr('height', function(d){
    return yScale(d);
})

.attr('x', function(d,i){
    return xScale(i);
})
.attr('y', function(d){
    return height - yScale(d);
})

<!DOCTYPE html>
<html>

<head>
    <title>Line Chart</title>
    <meta charset="8-UTF">
    <link rel="stylesheet" src="css/style.css"> </head>

<body>
    <div class="container">
        <h2>D3 Graphic</h2>
       <div id="chart"></div>
    </div>
    <script src="js/d3.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

最佳答案

在(不是这样的)新 D3 v4 中:

The ordinal.rangeBands and ordinal.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: band scales. (source)

因此，您必须在此处进行三处更改:

scaleBand 而不是 scaleOrdinal
xScale.bandwidth() 代替 xScale.rangeBands()
在比例尺中设置padding

经过这些更改，这是您的代码:

var bardata = [20, 30, 95, 15];
var height = 400,
  width = 600,
  barWidth = 50,
  barOffset = 5;

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

var xScale = d3.scaleBand()
  .domain(d3.range(0, bardata.length))
  .padding(0.1)
  .range([0, width])

d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)
  .style('background', '#C9D7D6')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.bandwidth())
  .attr('height', function(d) {
    return yScale(d);
  })

.attr('x', function(d, i) {
    return xScale(i);
  })
  .attr('y', function(d) {
    return height - yScale(d);
  })

<script src="https://d3js.org/d3.v4.min.js"></script>

关于javascript - D3 条形图未捕获类型错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42795783/

javascript - D3 条形图未捕获类型错误

上一篇：javascript - 为什么 BrowserRouter 既是 Router 又是 Route

下一篇：javascript - 我可以在 DOM addEventListener 中使用 Angular2 服务吗？