负值未显示在分组条形图中

Question

我正在尝试制作具有负值和正值的分组条形图。问题是我只能绘制正值。 Y 轴停止在 0 而不是最低值。如何确保条形图可以同时具有正值和负值？

这是我的 CSV：

name,value,koken,kcal
Ab,-15,0,-7
C,22,1,2
Bc,-20,0,-10
E,2,1,20

这是我的代码：

var margin = {top: 20, right: 30, bottom: 40, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

var x0 = d3.scaleBand()
    .rangeRound([0, width]);

var x1 = d3.scaleBand()
    .padding(0.05);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888"]);

d3.csv("flare0.csv", function(d, i, columns) {
    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
    return d;
},
    function(error, data) {
    if (error) throw error;

    var keys = data.columns.slice(1);

    x0.domain(data.map(function(d) { 
        return d.name; }));

        x1.domain(keys).rangeRound([0, x0.bandwidth()]);

    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

  console.log(data);
    g.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g")
        .attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
            .attr("transform", function(d) { return "translate(" + x0(d.name) + ",0)"; })
        .selectAll("rect")
        .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
        .enter().append("rect")
        .attr("x", function(d) { return x1(d.key); })
        .attr("y", function(d) { return y(d.value); })
        .attr("width", x1.bandwidth())

        .attr("height", function(d) {
            console.log(height - y(d.value));
            return height - y(d.value); })
        .attr("fill", function(d) { return z(d.key); });

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

    g.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y).ticks(null, "0"))
        .append("text")
        .attr("x", 20)
        .attr("y", y(y.ticks().pop()) + 0.5)
        .attr("dy", "0.32em")
        .attr("fill", "#000")
        .attr("font-weight", "bold")
        .attr("text-anchor", "start")
        .text("Population");       
});

Answer 1

This gist 提供了一个可以让您更接近的示例。 通过添加以下代码，我设法让负值和正值同时出现：

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

这是一个更新的 Plunker：http://plnkr.co/edit/pZzFKaiQWNVJm0SuK9kW?p=preview

如果您使用我提供的要点作为参考，您将能够修改您的代码，以便从 0 开始绘制条形图，而不是最低值。

Answer 2

首先，更改您的 y 比例域以获取负值：

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

如果您想要更短的代码，请考虑在此处使用d3.extent。

然后，改变你的数学：从轴的底部出来并向上的条是没有意义的。取而代之的是，所有条形图都应来自y 轴中的0 值，如果为正则向上，否则如果为负则向下：

.attr("y", function(d) {
    return d.value > 0 ? y(d.value) : y(0);
})
.attr("height", function(d) {
    return d.value > 0 ? y(0) - y(d.value) : y(d.value) - y(0);
})

这是您的代码进行了这些更改：

var csv = `name,value,koken,kcal
Ab,-15,0,-7
C,22,1,2
Bc,-20,0,-10
E,2,1,20`;

var margin = {
    top: 20,
    right: 30,
    bottom: 40,
    left: 30
  },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

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

var x0 = d3.scaleBand()
  .rangeRound([0, width]);

var x1 = d3.scaleBand()
  .padding(0.05);

var y = d3.scaleLinear()
  .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888"]);

var data = d3.csvParse(csv, function(d, i, columns) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
  return d;
});

var keys = data.columns.slice(1);

x0.domain(data.map(function(d) {
  return d.name;
}));

x1.domain(keys).rangeRound([0, x0.bandwidth()]);

y.domain([d3.min(data, function(d) {
  return d3.min(keys, function(key) {
    return d[key];
  });
}) * 1.1, d3.max(data, function(d) {
  return d3.max(keys, function(key) {
    return d[key];
  });
}) * 1.1]).nice();

g.append("g")
  .selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("class", function(d) {
    return d < 0 ? "bar negative" : "bar positive";
  })
  .attr("transform", function(d) {
    return "translate(" + x0(d.name) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x1(d.key);
  })
  .attr("y", function(d) {
    return d.value > 0 ? y(d.value) : y(0);
  })
  .attr("width", x1.bandwidth())

.attr("height", function(d) {
    return d.value > 0 ? y(0) - y(d.value) : y(d.value) - y(0);
  })
  .attr("fill", function(d) {
    return z(d.key);
  });

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

g.append("g")
  .attr("class", "axis")
  .call(d3.axisLeft(y).ticks(null, "0"))
  .append("text")
  .attr("x", 20)
  .attr("y", y(y.ticks().pop()) + 0.5)
  .attr("dy", "0.32em")
  .attr("fill", "#000")
  .attr("font-weight", "bold")
  .attr("text-anchor", "start")
  .text("Population");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="400"></svg>