javascript - Plottable.Plots.Rectangle 创建宽度为 0 的矩形

Question

我有以下数据:

[{
    "date": "2016-10-12T00:00:00.000Z",
    "parameter": "end_brick_temperature",
    "value": 61.3,
    "color": "green"
}, {
    "date": "2016-10-12T00:00:00.000Z",
    "parameter": "percentage_of_expected_messages_received",
    "value": 99.6667,
    "color": "green"
}, {
    "date": "2016-10-12T00:00:00.000Z",
    "parameter": "energy_used_kwh",
    "value": 1.73418,
    "color": "orange"
}, {
    "date": "2016-10-12T08:00:00.000Z",
    "parameter": "energy_used_kwh",
    "value": 0.70354,
    "color": "red"
}, {
    "date": "2016-10-12T08:00:00.000Z",
    "parameter": "end_brick_temperature",
    "value": 57.7,
    "color": "green"
}, {
    "date": "2016-10-12T08:00:00.000Z",
    "parameter": "percentage_of_expected_messages_received",
    "value": 98.3333,
    "color": "green"
}, {
    "date": "2016-10-12T16:00:00.000Z",
    "parameter": "percentage_of_expected_messages_received",
    "value": 99.1667,
    "color": "green"
}, {
    "date": "2016-10-12T16:00:00.000Z",
    "parameter": "energy_used_kwh",
    "value": 0,
    "color": "red"
}, {
    "date": "2016-10-12T16:00:00.000Z",
    "parameter": "end_brick_temperature",
    "value": 42.2,
    "color": "green"
}, {
    "date": "2016-10-13T00:00:00.000Z",
    "parameter": "energy_used_kwh",
    "value": 1.73979,
    "color": "orange"
}, {
    "date": "2016-10-13T00:00:00.000Z",
    "parameter": "end_brick_temperature",
    "value": 66.2
}, {
    "date": "2016-10-13T00:00:00.000Z",
    "parameter": "percentage_of_expected_messages_received",
    "value": 99.3333,
    "color": "green"
}, {
    "date": "2016-10-13T08:00:00.000Z",
    "parameter": "end_brick_temperature",
    "value": 59.8,
    "color": "green"
}, {
    "date": "2016-10-13T08:00:00.000Z",
    "parameter": "energy_used_kwh",
    "value": 0.711456,
    "color": "red"
}, {
    "date": "2016-10-13T08:00:00.000Z",
    "parameter": "percentage_of_expected_messages_received",
    "value": 98.3333,
    "color": "green"
}]

我正在尝试使用 Plottable.Plot.Rectangle 和以下代码创建热图:

    var xScale = new Plottable.Scales.Time().domain([data[0].date, data[data.length - 1].date]);
    var xAxisDate = new Plottable.Axes.Time(xScale, "bottom");
    var yScale = new Plottable.Scales.Category();
    var yAxisParameters = new Plottable.Axes.Category(yScale, "left");

    var plot = new Plottable.Plots.Rectangle()
        .addDataset(new Plottable.Dataset(data))
        .x(function (d) {
            return d.date
        }, xScale)
        .y(function (d) {
            return d.parameter
        }, yScale)
        .attr("fill", function (d) {
            return d.color
        });

    var table = new Plottable.Components.Table([
        [yAxisParameters, plot],
        [null, xAxisDate]
    ]);

    table.renderTo("svg#heatmap");

但是它只是创建宽度为 0 的矩形，因此 x 轴(日期)上的某些内容不起作用:

<rect fill="green" width="0.0000028312475887345677"
    x="-0.0000014156237943672838" height="81.66666666666667" y="0">  
</rect>

Answer 1

似乎您必须指定 .x2()，例如

.x2(function (d) {
            return new Date().setHours(d.date.getHours() + 8);
}, xScale)