d3条形图错误说明xScale.bandwidth()不是一个函数

Question

，有人能告诉我我做错了什么吗？我收到了一个错误.

Uncaught TypeError: xScale.bandwidth不是barChart (bar_chart.js:53:27)在bar_chart.js:84:5上的一个函数

我正在尝试创建这个数据的条形图。

year,total_ghg
2000,661.97
2001,665.72
2002,660.75
2003,583.65
2004,635.5
2005,598.44
2006,646.91
2007,646.46
2008,617.09
2009,633.8
2010,601.14
2011,644.74
2012,643.12
2013,555.26
2014,566.21
2015,566.47
2016,577.32
2017,623.08
2018,619.26 

我的js

​

var dataset;

function barChart(dataset) {
  //declaring Varibales
var margin = {top:50, right:50, bottom:50, left:50};
  var width = 500-margin.left-margin.right;
  var height = 500-margin.top-margin.bottom;

//creating svg
  var svg = d3
    .select("#barchart")
    .append("svg")
    .attr("width", width+margin.left+margin.right)
    .attr("height", height+margin.top+margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//setting up scales
var xScale = d3
  .scaleTime()
  .domain([
    d3.min(dataset, function (d) {
      return d.year;
    }),
    d3.max(dataset, function (d) {
      return d.year;
    }),
  ])
.range([0,width]);

var yScale = d3.scaleLinear()
.domain([0,d3.max(dataset, function (d) {
    return d.total_ghg;
  })
])
.range([height,0]);

// Plotting axis

svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(xScale));
svg.append("g").call(d3.axisLeft(yScale));

  //Set up groups
  svg.selectAll("mybar")
  .enter()
  .data(dataset).append("rect")
    .attr("x", function(d) {
      return xScale(d.year);
    })
    .attr('y', function(d) {
      return yScale(d.total_ghg);
    })
    .attr("width", xScale.rangeBand())
    .attr('height', function(d) {
      return height - yScale(d.total_ghg);
    })
    .attr("fill", "#004DA5")
    .on("mouseover", function(event, d) {
      d3.select(this).attr("fill", "orange");
      var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2 - 5;
      var yPosition = parseFloat(d3.select(this).attr("y")) + 20;
      svg.append("text")
        .attr("id", "tooltip")
        .attr("x", xPosition)
        .attr("y", yPosition)
        .text(d);
    }).on("mouseout", function(d) {
      d3.select("#tooltip").remove();
      d3.select(this)
        .attr("fill", "#004DA5")
    });

}

function init() {
  d3.csv("src/data/total_ghp.csv", function (d) {
    // + : force the year and month to be typed as a number instead of string
    return {
      year: d3.timeParse("%Y")(d.year),
      total_ghg: +d.total_ghg,
    };
  }).then(function (data) {
    dataset = data;
    barChart(dataset);
  });
}

window.addEventListener("load", init);

​

如有任何建议请

我试过的

ScaleOrdinal
rangeBandRounds
RangeBand()

而不是带宽和更多的东西，比如使用不同的d3脚本，在每个场景中都有相同的错误

Answer 1

您的xScale使用scaleTime，它用于轴表示时间的图表(即线图)。对于条形图，您应该使用scaleBand，它确实具有bandwidth函数：

const xScale = d3
  .scaleBand()
  .domain([
    d3.min(dataset, (d) => d.year),
    d3.max(dataset, (d) = > d.year),
  ])
  .range([0, width]);

有关scaleBand的更多信息可以在这里找到：https://observablehq.com/@d3/d3-scaleband

代码中还有其他一些错误阻止了条形图的呈现：

xScale.bandwidth()

• Move

• 将scaleTime替换为scaleBand，xScale

• 将xScale.rangeBand()替换为scaleBand .enter()，在.data(dataset)

之后