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

путь представляет собой единое целое, так что вы можете не стиль деталей из если согласно некоторым данным. То, что d3.svg.line делает, создает строку, которая описывает путь (атрибут d элемента path), поэтому он использует все данные для создания одного элемента.

Если я правильно понял, что вы хотите, вместо того, чтобы использовать путь, который вы должны использовать сегментированную линию: рисовать n отрезок (SVG line элементов), так что вы можете стиль каждый из них по отдельности, в соответствии с его опорной точкой.

Вы можете взглянуть на this example, вы увидите, что он создает элемент path для каждой точки привязки.