d3.js图以绘制二进制数据

Question

我正在尝试创建一个从日志文件中绘制数据的图形，该数据指示多个开关是打开还是关闭，因此它们的数据行是1或0，并且记录了24小时。 我正在寻找的是底部的时间刻度（24小时周期），我已经确定了，这是我需要帮助的地方，我需要一条横跨整个时间刻度的数据线的水平条，但是这将是两种颜色，一种用于打开时（数据= 1），另一种用于关闭时。

我怀疑我需要检查以下代码部分中的数据，并根据其值设置颜色，但是如何在此处访问数据

  svg.append("path")      
    .attr("class", "line")
    .style("stroke", "red")
    .attr("stroke-width", 5)
    .attr("d", valuleline_heater1(data));

在本节中，我可以访问数据，但不能控制颜色

    var valuleline_heater1 = d3.svg.line()
            .x(function(d) { return x(d.dt); })
            .y(function(d) { return y(d.heater1); });

谁能指出我正确的方向，非常感谢

Answer 1

路径是单个实体，因此您无法根据某些数据设置if的样式。 d3.svg.line作用是创建描述路径的字符串（ path元素的d属性），因此它将使用所有数据来创建单个元素。

如果我正确理解了您想要的内容，那么应该使用分段线代替使用路径：绘制n条线段（svg line元素），以便可以根据其基准分别设置每个样式。

您可以看一下此示例 ，您将看到它为每个基准创建了一个path元素。