Question

我从这个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); })]);

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

结果我得到的这个条形图没有显示正确的人口值

谢谢。

Answer 1

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

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

.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}

Answer 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}。

D3.js没有获得y轴值

2 个答案: