Передать нулевые значения в SVG-путь (используя d3.js), чтобы подавить отсутствующие данные

Question

Используя jQuery Flot, я могу передать значение null механизму построения, чтобы оно ничего не рисовало на графике.Посмотрите, как подавляются пропущенные записи:

Я хочу перейти к d3js, чтобы я мог иметь более низкий уровень контроля над графикой с помощью SVG.Однако мне еще предстоит выяснить, как сделать тот же процесс подавления пропущенных записей.Изображение ниже является попыткой сделать это, используя значение 0 вместо null (где пакет d3 не работает).Вот некоторый код, чтобы дать вам представление о том, как я создал график ниже:

var line = d3.svg.line()
    .x(function(d) {
       var date = new Date(d[0]);
       return x(date);
    })
    .y(function(d) {
       var height = d[1]; 
       if (no_record_exists) {
           return y(0);
       }
       return y(height) + 0.5;
    });

Я посмотрел элемент SVG path в Сети разработчиков Mozilla,и я обнаружил, что есть команда MoveTo, M x y, которая только перемещает "ручку" в какую-то точку, ничего не рисуя.Было ли это реализовано в пакете d3js, чтобы мне не приходилось создавать несколько элементов path каждый раз, когда я сталкиваюсь с отсутствующей записью?

Answer 1

Функция defined для d3.svg.line() - это способ сделать это

Допустим, мы хотим включить разрыв в график, если y равно нулю:

line.defined(function(d) { return d.y!=null; })

Answer 2

Используйте line.defined или area.defined и посмотрите пример Область с отсутствующими данными .