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/

相关文章:

css - 如何在 react-d3-tree 上定义单独的链接样式

javascript - Backbone.js/下划线.js : Why isn't my template escaping

javascript - 如何使用 jQuery 更改可折叠内容的标题属性

javascript - 是否可以从选择器中获取 .getScript?

javascript - Jquery 选择输入类型

rMaps ichoropleth 与自定义 map /shp

asp.net-mvc - MVC 6 中 @Scripts.Render 的替代品是什么

javascript - 处理具有数据限制限制的重复 API 查询的最佳方法

javascript - 有没有办法让这段代码更短

jQuery.html() 获取内部 html。但我需要整个 html