Question

我试图使用d3版本4制作d3条形图并且它给出了以下错误：未捕获的TypeError：d3.scaleOrdinal（...）。domain（...）。rangeBands不是功能，我添加了我的代码片段，任何人都可以为我修复它吗？

＆＃13;

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);
})

＆＃13;

<!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>

＆＃13;

Answer 1

在（不是这样的）新D3 v4中：

ordinal.rangeBands和ordinal.rangeRoundBands方法已被替换为序数尺度的新子类：带尺度。（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>

D3条形图未被捕获TypeError

1 个答案: