D3.js 没有得到 y 轴值答案

【问题标题】：D3.js not getting y axis valuesD3.js 没有得到 y 轴值
【发布时间】：2017-03-03 14:02:16
【问题描述】：

我从这个 D3.js website example 中获取了一个简单条形图可视化的代码。

代码采用 tsv 文件，并用条形图表示字母的频率。

在我的例子中，我使用的是 csv 文件，并且我试图代表一段时间内的人口。

这就是我的 csv 的格式：

年人口 2005 273750 2006 273750 2007 273750 2008 274000 2009 274000 2010 274000 2011 274000 2012 274000 2013 275231 2014 274949 2015 276294

这是我当前正在执行的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(d) {
  d.population = +d.population;
  d.year = +d.year;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.year; }));
  y.domain([0, d3.max(data, function(d) { return d.population; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Population");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.year); })
      .attr("y", function(d) { return y(d.population); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.population); });
});

</script>

注意：在尝试测试我是否得到正确的值时：

      x.domain(data.map(function(d) { console.log(d.year); }));
  y.domain([0, d3.max(data, function(d) { console.log(d.population); })]);

我只返回不同的人口数量，而不是每年的每个人口数量（即使每年都有相同的值）。

因此，我得到的这个条形图没有显示正确的人口值

谢谢。

【问题讨论】：

标签： javascript python-2.7 d3.js bar-chart data-visualization

【解决方案1】：

您的代码实际上显示了正确的人口值。当数据从0 缩放时，数据中的值非常接近。

如果在为矩形定义y 属性时在代码中放置console.log 语句，如下所示：

.attr("y", function(d) { console.log(d.population, y(d.population)); return y(d.population); })

你得到以下值：

最后一个数字以像素表示矩形停止的位置，正如您所见，min 和max 的人口规模之间只有四个像素的差异。所以有区别，但很小。为了说明我的观点，您可以向 csv 添加另一个数据点：

2016,100000

我得到了这样的东西：

所以你看到它正在工作。现在，如果您真的想看到差异，您需要将y.domain 更改为：

  y.domain([d3.min(data, function(d) {return d.population; }), d3.max(data, function(d) {return d.population; })]);

它为您提供：

数据的差异更清晰可见。但是现在您遇到的问题是人口值最低的数据点将没有条形图。这可以通过确定数据中的最小值并减去某个值来解决。然后将此值设置为域最小值，或者您可以自己硬编码一个值。

最后，您可能希望增加左边距以获得完整的刻度值。

margin = {top: 20, right: 20, bottom: 30, left: 50}

【讨论】：

【解决方案2】：

您的代码没有问题。

问题是您的数据最小值为 273750，最大值为 276294。这是 1% 的变化，因此在此比例下不会注意到差异。

您需要更改您的比例域，请尝试以下操作：

y.domain([250000, d3.max(data, function(d) { return d.population; })]);

这会导致你的y轴出现一些问题，所以我不建议你只是复制粘贴代码，试着一步一步理解代码的每一部分。

您可以检查您的 y 轴是否已经出现问题。您需要更大的左边距，尝试设置为 60：margin = {top: 20, right: 20, bottom: 30, left: 60}。

【讨论】：