javascript - d3.js v4 条形图，y 轴上有负值

Question

我在 d3.js 中使用了很多图表，它们在 x 轴上有负值，但我看到的 y 轴上有负值的例子很少，而且我没有一个能够开始工作。

我正在尝试创建一个图表，x 轴是我的日期，y 轴是相应的值。

我已经尝试通过操作下面链接中的代码来做到这一点:

D3 v4 bar chart X axis with negative values

我的代码如下:

var margin2 = { top: 20, right: 20, bottom: 40, left: 30 };
var height2 = 650 - margin2.top - margin2.bottom;
var width2 = 900 - margin2.left - margin2.right;

// Add svg to
var svg = d3.select('#macdChart').
    append('svg').
    attr('width', width2 + margin2.left + margin2.right).
    attr('height', height2 + margin2.top + margin2.bottom).
    append('g').
    attr('transform', 'translate(' + margin2.left + ',' + margin2.top + ')');

//title
svg.append("text")
    .attr("x", (width2 / 2))
    .attr("y", 0 - (margin2.top / 3))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Title");

// X scale
var x2 = d3.scaleBand().
    range([width2, 0])
    .padding(0.1);

//y scale
var y2 = d3.scaleLinear()
    .range([height2, 0]);



var xAxis = d3.axisBottom(x2);

var yAxis = d3.axisLeft(y2).
    tickSize(6, 0);

// text label for the x axis
svg.append("text")
    .attr("transform", "translate(" + (width2 / 2) + " ," + (height2 + margin2.top + 20) + ")")
    .style("text-anchor", "middle")
    .text("X Label");


function render(data) {
    data.forEach(function (d) {
        d.Macd = +d.Macd;
        d.MacdSignal = +d.MacdSignal;
        d.MacdHistogram = +d.MacdHistogram;
    });

    x2.domain(data.map(function (d) { return d["date"]; }));
    y2.domain(d3.extent(data, function (d) { return d["MacdHistogram"]; })).nice();

    svg.selectAll('.bar').
        data(data).
        enter().append('rect').
        attr('class', function (d) {
            return "bar bar--" + (d["MacdHistogram"] < 0 ? "negative" : "positive");
        }).
        attr('x', function (d) { return x2(d["date"]); }).
        attr('y', function (d) { return y2(Math.min(0, d["MacdHistogram"])); }).
        attr('height', function (d) { return Math.abs(y2(d["MacdHistogram"]) - y2(0)); }).
        attr('width', x2.bandwidth());

    svg.append('g').
        attr('class', 'y axis').
        attr('transform', 'translate(' + width2 + ',0)').
        call(yAxis);

    var tickNegative = svg.append('g').
        attr('class', 'x axis').
        attr('transform', 'translate(0,' + y2(0) + ')').
        call(xAxis).
        selectAll('.tick').
        filter(function (d, i) { return data[i].value < 0; });

    }

生成以下内容:

现在，如果我将 y 的范围从:

    var y2 = d3.scaleLinear()
        .range([height2, 0]);

收件人:

    var y2 = d3.scaleLinear()
        .range([0, height2]);

我得到的图表下方的条形值正确显示，但负值在顶部，正值在底部(如您在我的 y 轴标签上所见):

有人可以建议如何让图表准确地看它现在的样子只是翻转所以底片在底部吗？

Answer 1

在 y 位置使用 Math.max 而不是 Math.min:

.attr('y', function (d) { 
    return y2(Math.max(0, d["MacdHistogram"]))
});

原因是，无论范围的方向如何，SVG 矩形总是(除非您弄乱了transform)的宽度从左到右增加，并且高度从上到下增长。

这是一个使用虚假数据进行更改的演示:

var margin2 = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
};
var height2 = 400 - margin2.top - margin2.bottom;
var width2 = 500 - margin2.left - margin2.right;

// Add svg to
var svg = d3.select('body').
append('svg').
attr('width', width2 + margin2.left + margin2.right).
attr('height', height2 + margin2.top + margin2.bottom).
append('g').
attr('transform', 'translate(' + margin2.left + ',' + margin2.top + ')');

//title
svg.append("text")
  .attr("x", (width2 / 2))
  .attr("y", 0 - (margin2.top / 3))
  .attr("text-anchor", "middle")
  .style("font-size", "16px")
  .style("text-decoration", "underline")
  .text("Title");

// X scale
var x2 = d3.scaleBand().
range([width2, 0])
  .padding(0.1);

//y scale
var y2 = d3.scaleLinear()
  .range([height2, 0]);



var xAxis = d3.axisBottom(x2);

var yAxis = d3.axisLeft(y2).
tickSize(6, 0);

// text label for the x axis
svg.append("text")
  .attr("transform", "translate(" + (width2 / 2) + " ," + (height2 + margin2.top + 20) + ")")
  .style("text-anchor", "middle")
  .text("X Label");


function render(data) {
  x2.domain(data.map(function(d) {
    return d["date"];
  }));
  y2.domain(d3.extent(data, function(d) {
    return d["MacdHistogram"];
  })).nice();

  svg.selectAll('.bar').
  data(data).
  enter().append('rect').
  attr('class', function(d) {
    return "bar bar--" + (d["MacdHistogram"] < 0 ? "negative" : "positive");
  }).
  attr('x', function(d) {
    return x2(d["date"]);
  }).
  attr('y', function(d) {
    return y2(Math.max(0, d["MacdHistogram"]));
  }).
  attr('height', function(d) {
    return Math.abs(y2(d["MacdHistogram"]) - y2(0));
  }).
  attr('width', x2.bandwidth());

  svg.append('g').
  attr('class', 'y axis').
  attr('transform', 'translate(' + width2 + ',0)').
  call(yAxis);

  var tickNegative = svg.append('g').
  attr('class', 'x axis').
  attr('transform', 'translate(0,' + y2(0) + ')').
  call(xAxis).
  selectAll('.tick').
  filter(function(d, i) {
    return data[i].value < 0;
  });
}

var data = [{
  date: 1,
  MacdHistogram: 1
}, {
  date: 2,
  MacdHistogram: -2
}, {
  date: 3,
  MacdHistogram: 8
}, {
  date: 4,
  MacdHistogram: 3
}, {
  date: 5,
  MacdHistogram: 12
}, {
  date: 6,
  MacdHistogram: -5
}, {
  date: 7,
  MacdHistogram: 1
}, {
  date: 8,
  MacdHistogram: 9
}, {
  date: 9,
  MacdHistogram: -1
}, {
  date: 10,
  MacdHistogram: 10
}, {
  date: 11,
  MacdHistogram: 7
}, {
  date: 12,
  MacdHistogram: -8
}, {
  date: 13,
  MacdHistogram: 7
}, {
  date: 14,
  MacdHistogram: -4
}, {
  date: 15,
  MacdHistogram: 1
}];

render(data)

<script src="https://d3js.org/d3.v4.min.js"></script>