Javascript D3负值条形图

Javascript D3负值条形图,javascript,html,d3.js,Javascript,Html,D3.js,您好,我需要帮助在我的条形图中显示负值,它目前不显示,只显示正值。它将输出一个错误,表示rect的负值无效。 我如何解决这个问题?我的代码是 var dataset = [ (121651.391 / 1000), (226572.523 / 1000), (-7708.748564 / 1000), (165348.8828 / 1000), (87917.84251 / 1000), (129156.684 / 1000), (46133.22384 / 1000), (17775.3205

您好,我需要帮助在我的条形图中显示负值,它目前不显示,只显示正值。它将输出一个错误,表示rect的负值无效。 我如何解决这个问题?我的代码是

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;  
    });

非常感谢任何帮助首先,矩形的高度不能是负值

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

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

2.也许你可以画一个正矩形,然后用“变换”来旋转。 这里有一把小提琴向你展示了变换


如果有负值,请将其更改为正值,但将其向下移动,使其顶部为0。元素不能有负高度。嗯,我不太明白你的意思,你的意思是,例如-7708.748564,我只是加上7708.747564,把高度调大?
.attr('y', function(d) {
    if(d.status === "System Error") {
        return height;
    }
    return y(d.duration) 
})
.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"))();
        
}