显示具有日期和状态js jquery d3的设备的在线离线

Question

我一直在尝试使用

这类数据创建一个条形码

"data":[
         ["2016-12-18 00:25:20",1],
         ["2016-12-19 00:25:20",0],
         ["2016-12-19 00:26:18",1],
         ["2016-12-19 05:50:21",0],
         ["2016-12-19 05:51:19",1],
         ["2016-12-20 05:25:46",0],
         ["2016-12-20 05:27:03",1],
         ["2016-12-20 05:50:17",0],
         ["2016-12-20 05:51:17",1],
         ["2016-12-21 03:25:43",0],
         ["2016-12-21 03:26:42",1],
         ["2016-12-21 05:50:27",0],
         ["2016-12-21 05:51:41",1],
         ["2016-12-22 03:25:30",0],
         ["2016-12-22 03:26:41",1],
         ["2016-12-22 05:50:22",0],
         ["2016-12-22 05:51:22",1]
     ]

在这个日期和时间是设备上线或离线的时间段，其中1和0分别代表在线和离线，我一直在使用https://github.com/flrs/visavail d3j实现来获得这样的结果

这个想法已在https://uptimerobot.com/中实施。

flrs的观察结果目前没有给出正确的结果，我只是想知道是否有人对此有其他想法。或者知道一些d3实现来显示这样的条形，或者如果我们从中获取d3并且仅在Jquery或JS中执行此操作，是否可以创建这样的条形图？用这种数据？

Answer 1

这并不复杂，你可以用简单的line元素来做。

在这个演示中，我正在绘制所有行，但是根据在线/离线状态设置不透明度：

var data = [
    ["2016-12-18 00:25:20", 1],
    ["2016-12-19 00:25:20", 0],
    ["2016-12-19 00:26:18", 1],
    ["2016-12-19 05:50:21", 0],
    ["2016-12-19 05:51:19", 1],
    ["2016-12-20 05:25:46", 0],
    ["2016-12-20 05:27:03", 1],
    ["2016-12-20 05:50:17", 0],
    ["2016-12-20 05:51:17", 1],
    ["2016-12-21 03:25:43", 0],
    ["2016-12-21 03:26:42", 1],
    ["2016-12-21 05:50:27", 0],
    ["2016-12-21 05:51:41", 1],
    ["2016-12-22 03:25:30", 0],
    ["2016-12-22 03:26:41", 1],
    ["2016-12-22 05:50:22", 0],
    ["2016-12-22 05:51:22", 1]
];

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

data.forEach(d => d[0] = parseTime(d[0]));

var scale = d3.scaleTime()
    .domain(d3.extent(data, d => d[0]))
    .range([0, 300])

var svg = d3.select("svg");

var lines = svg.selectAll(".lines")
    .data(data)
    .enter()
    .append("line")
    .attr("y1", 50)
    .attr("y2", 70)
    .attr("x1", d => scale(d[0]))
    .attr("x2", d => scale(d[0]))
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("opacity", d => d[1] ? 1 : 0);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<rect x="0" y="50" width="300" height="20" fill="lightgreen"></rect>
</svg>

编辑：再次阅读您的问题，现在我看到您有更改的时间间隔：每个日期显示一个时段开始而前一个时段结束。我的坏。

这是另一个片段。这是（也）一个非常简单的代码，我在其中绘制从给定日期开始到下一个日期结束的矩形。在线时段的矩形为“绿色”，离线时段为“红色”：

var data = [
    ["2016-12-18 00:25:20", 1],
    ["2016-12-19 00:10:20", 0],
    ["2016-12-19 00:36:18", 1],
    ["2016-12-19 05:50:21", 0],
    ["2016-12-19 05:59:19", 1],
    ["2016-12-20 05:25:46", 0],
    ["2016-12-20 05:37:03", 1],
    ["2016-12-20 05:50:17", 0],
    ["2016-12-20 06:58:17", 1],
    ["2016-12-21 03:25:43", 0],
    ["2016-12-21 03:36:42", 1],
    ["2016-12-21 05:50:27", 0],
    ["2016-12-21 06:09:41", 1],
    ["2016-12-22 03:25:30", 0],
    ["2016-12-22 04:26:41", 1],
    ["2016-12-22 05:50:22", 0],
    ["2016-12-22 05:51:22", 1]
];

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

data.forEach(d => d[0] = parseTime(d[0]));

var scale = d3.scaleTime()
    .domain(d3.extent(data, d => d[0]))
    .range([0, 500])

var svg = d3.select("svg");

var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect")
    .attr("y", 50)
    .attr("height", 20)
    .attr("x", d => scale(d[0]))
    .attr("width", (d, i) => {
        if (data[i + 1]) {
            return scale(data[i + 1][0]) - scale(d[0])
        } else {
            return 0
        }
    })
    .attr("fill", d => d[1] ? "lightgreen" : "red");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500">
</svg>