[英]D3 negative value bar chart
嗨,我需要我的条形图中的负值方面的帮助,它目前未显示,仅显示正值。 它将输出一个错误,指出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;
});
任何帮助表示赞赏
首先,矩形的高度不能为负值。
我能想到的是这里列出的两种方式:
在这里看小提琴 。
.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"))();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.