javascript - D3负值条形图

Question

您好，我需要有关条形图中负值的帮助，它目前未显示，仅显示正值。它将输出一个错误，指出矩形的负值无效。 我该如何解决这个问题？我的代码是

var dataset = [ (121651.391 / 1000), (226572.523 / 1000), (-7708.748564 / 1000), (165348.8828 / 1000), (87917.84251 / 1000), (129156.684 / 1000), (46133.22384 / 1000), (17775.32051 / 1000), (92209.22587 / 1000), (168072.8333 / 1000),(35361.62174 / 1000), (1195.90284 / 1000), (-2841.722459 / 1000), (-2841.722459 / 1000), (-1936.84912 / 1000), (8078.804727 / 1000), (-72495.06187 / 1000), (297950.5249 / 1000)];


//Width and height
var w = 500;
var h = 200;
var barPadding = 1;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", 20)
   .attr("height", 200)
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
})
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 4;
})
  .attr("y", function(d) {
    return h - (d * 4);  
})
  .attr("fill", function(d) {
    return "rgb(0, 0, " + (d * 10) + ")";
});
  svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })
   .attr("x", function(d, i) {
        return i * (w / dataset.length);
   })
   .attr("y", function(d) {
        return h - (d * 4);
   })
      .attr("x", function(d, i) {
        return i * (w / dataset.length) + 5;  
   })
   .attr("y", function(d) {
        return h - (d * 4) + 15;              
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white")
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
    .attr("y", function(d) {
        return h - (d * 4) + 14;  
    });

非常感谢任何帮助

Answer 1

首先，矩形的高度不能为负值。

我能想到的是这里列出的两种方法:

1。对起始 y 位置进行特殊处理，这是实现您目的的简单且更好的方法。

参见fiddle在这里。

.attr('y', function(d) {
    if(d.status === "System Error") {
        return height;
    }
    return y(d.duration) 
})

2.也许你可以画一个正矩形，然后使用变换来旋转来达到目的。

这是一个向您展示转换的 fiddle

fiddle

.attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        //something like this
        .rotate(180)
        .translate(-d3.select(this).attr("width"), -d3.select(this).attr("height"))();
        
}