d3 bar Graph错误说xscale.bandwidth（）不是函数

Question

谁能告诉我我做错了什么？我有一个错误。

undured（在承诺中）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/d3/d3/d3-scaleband

您的代码中还有其他一些错误，可以防止您的条形渲染：

1. 用xscale xscale xscale
2. xscale x scalband替换scaletime。 rangeband（）with xscale.bandwidth（）
3. move .enter（）以.data（dataset）为之后