问题描述
我不知道如何正确创建直方图,其中数据数组中有正值和负值.
我在这里使用了直方图示例http://bl.ocks.org/mbostock/3048450 作为基础,虽然 x 轴值和刻度是正确的,但条形图已经出去吃午饭了.
数据
var 值 = [-15, -20, -22, -18, 2, 6, -26, -18, -15, -20, -22, -18, 2, 6, -26, -18];
X 比例
var x0 = Math.max(-d3.min(values), d3.max(values));var x = d3.scale.linear().domain([-x0, x0]).range([0, 宽度]).好的();
在这里检查 jfiddle:http://jsfiddle.net/tNdJj/2/
我认为这是rect"中缺少的东西创作,但我没有看到.
问题在于演示代码过于乐观,假设其输入为正:
bar.append("rect").attr("x", 1)//.attr("width", x(data[0].dx) - 1)//对负桶做错误的事情..attr("宽度", x(data[0].x + data[0].dx) - 1).attr("height", function(d) { return height - y(d.y); });
I can't figure out how to properly create a histogram where there are both positive and negative values in the data array.
I've used the histogram example here http://bl.ocks.org/mbostock/3048450 as a base, and while the x axis values and ticks are correct, the bars are out to lunch.
Data
var values = [-15, -20, -22, -18, 2, 6, -26, -18, -15, -20, -22, -18, 2, 6, -26, -18];
X Scale
var x0 = Math.max(-d3.min(values), d3.max(values));
var x = d3.scale.linear()
.domain([-x0, x0])
.range([0, width])
.nice();
Check the jfiddle here: http://jsfiddle.net/tNdJj/2/
I assume it's something missing from the "rect" creations but I am not seeing it.
The trick is that the demo code is overly optimistic, assuming that its input is positive:
bar.append("rect")
.attr("x", 1)
// .attr("width", x(data[0].dx) - 1) // Does the wrong thing for negative buckets.
.attr("width", x(data[0].x + data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
这篇关于带有正负值的 d3.js 直方图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2