javascript - 带时间刻度的 D3 直方图

Question

我正在尝试制作带有时间刻度的 D3 直方图。

关于该主题已有 2 个问题( D3 Histogram - Date Based 和 D3 time and date histogram )，但我仍然遇到问题。

如果相当简单，我使用 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);

JSFiddle here

奇怪的是，只有一个垃圾箱。

欢迎任何帮助

Answer 1

看到这个 fiddle :http://jsfiddle.net/henbox/smxnxvgt/3/

我首先修复了“错误:属性宽度的负值无效”错误，方法是将矩形上的宽度计算更改为:

.attr("width", x(data[0].x + data[0].dx) - 1);

因为在直方图布局生成的数据数组中，x 值是日期，但 dx 值是毫秒数。请参阅 @npdoty 对 this answer 的评论。我还添加了一些 CSS 以便更容易地看到发生了什么。

但是，要回答为什么只创建一个 bin 的问题:这与使用有关:

.bins(x.ticks(3))

设置 bin 数量时。更改为

.bins(3)

(...或更明智地在本例中为 2)，您将看到预期的行为。 This question对此有更多内容，但基本上因为您的 x 轴值是以毫秒为单位的日期，所以刻度被定义得相当任意\意外。您可能期望 x(箱的下限)和 dx(箱的宽度)很好地符合天数和小时数，但事实并非如此

最后:两个条形图都很短，因为直方图正在计算频率。所以第一个日期出现一次，第二个日期出现在两条记录中。但是，您的 y 轴范围基于最大值，即 140。如果您希望条形图显示频率以外的内容(例如，您想要对值求和在每个垃圾箱中都需要稍微不同的方法。