Question

有人可以帮帮我吗？我已经挣扎了几个小时......

我想使用d3.js创建条形图... 条形图将表示一个开/关状态，它将从数据库中获取，数据库将从树莓中填充..

我正在与x轴挣扎。我希望它代表24小时。例如，如果我在15:23:02轻弹开关然后在15:26:34那时我在x轴处得到了条形图。

我找到了一个条形图的例子，但是x轴是日期（日期和日期）。

令我困惑的部分是：

 .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])



.ticks(d3.time.days, 1)
    .tickFormat(d3.time.format('%a %d'))

我知道tickFormat应该是％H：％M：％S

此示例中的数据也使用日期..

var data = [{"date":"2012-03-20","total":1}, 

... etc

当我将它们改为时间时

var data = [{"date":"14:23:43","total":1},

没有任何作品。

有人可以指出我该怎么做吗？

这是一个jsfiddle，我试图这样做：

http://jsfiddle.net/hpjqt1dL/1/

提前致谢

Answer 1

如果您只处理时间值（没有日期），最简单的处理方式之一就是假设日期等于当前日期，然后让您的时间偏离那天00:00。

这是一个更新的小提琴，可以帮助您：http://jsfiddle.net/hpjqt1dL/4/

有许多变化：

您的数据变量已更新，以反映日期之间的变化。

var data = [{
    "time": "01:00:00",
    "total": 1
}, {
    "time": "01:05:30",
    "total": 1
}, {
    "time": "02:10:00",
    "total": 1
}, {
    "time": "03:15:30",
    "total": 1
}, {
    "time": "04:25:30",
    "total": 1
}, {
    "time": "07:55:15",
    "total": 1
}, {
    "time": "12:18:00",
    "total": 1
}, {
    "time": "17:00:00",
    "total": 1
}];

添加处理程序以正确设置每个数据元素中的日期/时间：

var today = new Date();
today.setHours(0, 0, 0, 0);
todayMillis = today.getTime();

data.forEach(function(d) {
    var parts = d.time.split(/:/);
    var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) +
                           (parseInt(parts[1], 10) * 60 * 1000) + 
                           (parseInt(parts[2], 10) * 1000);

    d.time = new Date();
    d.time.setTime(todayMillis + timePeriodMillis);
});

这会将每个数据元素的time属性设置为午夜的today值，加上数据中指定的时间。

修正x比例：

var x = d3.time.scale()
    .domain(extents)
    .nice(d3.time.day, 1)
    .rangeRound([0, width - margin.left - margin.right]);

这会将域设置为数据中指定的范围，并使用nice舍入为一整天。

修复x轴生成器：

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.hours, 2)
    .tickFormat(d3.time.format('%H:%M'))
    .tickSize(0)
    .tickPadding(8);

ticks和tickFormat参数设置为基于数据有意义的参数。

修复创建rects以使用新数据的代码：

svg.selectAll('.chart')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function (d) {
        return x(d.time);
    })
    .attr('y', function (d) {
        return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total))
    })
    .attr('width', 10)
    .attr('height', function (d) {
        return height - margin.top - margin.bottom - y(d.total)
    });

返回的x值只是传递给d.time比例的x属性，返回SVG中相应的x位置。

我选择的数据作为示例将突出显示您可能想要处理的潜在问题。由于您正在使用的条形图的宽度，您可能会在图表中的前两个条形图中显示重叠。我会让你知道如何最好地解决这个问题。

D3 js条形图，24小时x轴

1 个答案: