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

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

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

enter image description here

Я хочу перейти к 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;
    });

enter image description here

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

4b9b3361

Ответ 1

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

Скажем, мы хотим включить разрыв в диаграмму, если y равно null:

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