[英]D3 histogram with a time scale
I am trying to make a D3 histogram with a time scale. 我正在尝试制作带有时间刻度的D3直方图。
There are 2 questions already on the subject ( D3 Histogram - Date Based & D3 time and date histogram ), but I am still having problems. 关于此主题已经有2个问题( D3直方图-基于日期和D3时间和日期直方图 ),但是我仍然遇到问题。
It if fairly simple, I am using the timestamp of the dates for the x scale: 如果相当简单,我将使用x刻度的日期时间戳:
myData = [
{"date": new Date("1992-05-01 00:00:00"), "value": 10},
{"date": new Date("1992-05-02 00:00:00"), "value": 110},
{"date": new Date("1992-05-02 00:00:00"), "value": 140},
];
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 260 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
timeData = (myData.map(function(d) {return d.date.getTime()}));
var x = d3.scale.linear()
.domain([d3.min(timeData), d3.max(timeData)])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(myData, function(d) { return d.value; })])
.range([height, 0]);
var data = d3.layout.histogram()
.bins(x.ticks(3))
.value(function(d) {
return d.date.getTime()
})
(myData);
console.log("histogram data:", data);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) {
return "translate(" + x(d.x) + "," + y(d.y) + ")";
});
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) {
return height - y(d.y);
});
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data[0].dx) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return d.value; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
The strange thing is that there is only one bin. 奇怪的是只有一个垃圾箱。
Any help is welcome 欢迎任何帮助
See this fiddle: http://jsfiddle.net/henbox/smxnxvgt/3/ 看到这个小提琴: http : //jsfiddle.net/henbox/smxnxvgt/3/
I fixed the "Error: Invalid negative value for attribute width" error first, by changing the width
calculation on the rect
to: 我首先通过将
rect
的width
计算更改为:修复了“错误:属性宽度的负值无效”错误:
.attr("width", x(data[0].x + data[0].dx) - 1);
because in the data array that the histogram layout generates the x
value is a date but the dx
value is a number of milliseconds. 因为在直方图布局生成的数据数组中,
x
值是日期,而dx
值是毫秒数。 See @npdoty's comment on this answer . 请参阅@npdoty对这个答案的评论。 I also added some CSS to make it easier to see what's going on.
我还添加了一些CSS,以便更轻松地了解发生了什么。
However, to answer the question of why only one bin is created: This is related to using: 但是,要回答为什么只创建一个bin的问题:这与使用有关:
.bins(x.ticks(3))
when setting the number of bins. 设置垃圾箱数量时。 Changing to
更改为
.bins(3)
(... or more sensibly 2 in this example), you'll see expected behaviour. (在此示例中,...或更合理地为2),您将看到预期的行为。 This question has a bit more on this, but basically because your x-axis values are dates in milliseconds, ticks were being defined rather arbitrarily \\ unexpectedly.
这个问题还有很多,但基本上是因为您的x轴值是以毫秒为单位的日期,所以滴答声被非常随意地\\意外地定义了。 You might expect
x
(the lower bound of the bin) and dx
(the width of the bin) to conform nicely to days & hours, but it doesn't 您可能期望
x
(垃圾箱的下限)和dx
(垃圾箱的宽度)与天数和小时数完全吻合,但事实并非如此
Finally: both bars are very short because the histogram is counting frequency. 最后:两个直方图都很短,因为直方图正在计数频率。 So the first date appears once, the second date appears in two records.
因此,第一个日期出现一次,第二个日期出现在两个记录中。 However, your y-axis range is based on the max
value
, 140. If you want the bars to show something other than frequency (eg you want to sum the value
s in each bin that will need a slightly different approach. 然而,你y轴的范围是基于最高
value
。如果你想在酒吧显示出比其他频率的东西(比如你想求和,140 value
在每个斌认为需要一个稍微不同的方法秒。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.