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

标签 javascript jquery d3.js

我正在尝试使用 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)

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

  1. scaleBand 而不是 scaleOrdinal
  2. xScale.bandwidth() 代替 xScale.rangeBands()
  3. 在比例尺中设置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 - 应用适用于 block 中许多元素的状态更改

javascript - ReactJS 中的 JQuery 函数用于动态视口(viewport)高度

javascript - 将javascript变量值传递给fdt中的swf

javascript - d3.mouse( mySVG[0][0]) 真的是解决容器问题的正确方法吗?

javascript - 范围访问 - Javascript

javascript - 具有最小值和最大值的 Angular 滤波器

jquery - 如何自定义下拉菜单

jquery - 使用 jQuery 计时器通过 PHP 检查数据库是否有新记录?

javascript - 轴按比例正确显示,但图表条未正确绘制

javascript - 有人可以解释一下 D3s 饼图布局中的 JavaScript 模式吗?