Фильтр данных для элемента пути в D3js (v3)

Question

Я использую набор данных для рисования точек и элементов пути с помощью D3js.Набор данных содержит неопределенные значения, которые я хочу отфильтровать.Я знаю, как фильтровать точечные элементы, но мне не удается отфильтровать набор данных для таких элементов пути, как площадь и линия.Я хочу нарисовать область и линию только на основе фактических значений, поэтому мне нужно отфильтровать неопределенные элементы.Мой набор данных выглядит следующим образом:

ds = [
{x: 0, param1: 230, param2: 1070},
{x: 2, param1: 190, param2: undefined},
{x: 5.5, param1: 161, param2: 1207},
{x: 8, param1: 167, param2: 1165},
{x: 11, param1: 154, param2: 987},
{x: 12, param1: undefined, param2: 876},
{x: 12.32, param1: 187, param2: undefined},
{x: 15, param1: 156, param2: undefined},
....
];

Я знаю, как фильтровать набор данных для рисования элементов круга в диаграмме рассеяния (упрощенная версия):

group.selectAll("circle")
    .data(ds)
    .enter()
    .append("circle")  
    .filter(function(d) {return d.param1 != undefined} )
    .(...);

Я пробовал следующий коддля области:

var area = d3.svg.area()
    .x(function(d) {return x(d.x);})
    .y0(h-padding)
    .y1(function(d) {return y(d.param2);});
group.append("path")
    .attr("class","area")
    .datum(ds)
    .filter(function(d) { return d.param2 != undefined})
    .attr("d",area);

Мне кажется, я неправильно использую функцию фильтра.Я пытался добавить фильтр к объявлению переменной области, но я тоже не работал.Для линейного элемента у меня возникла та же проблема.

Все примеры SO, которые я изучаю, касаются фильтрации элементов круга / точек (например).Я не нашел ничего о фильтрации элементов пути.

Любая помощь приветствуется ..

Answer 1

Гораздо проще выполнить фильтрацию перед привязкой данных к DOM, чем пытаться преобразовать их после того, как вы нарисовали элементы и т. Д. Вы можете использовать стандартный фильтр массива для удаления неопределенных точек данных из ваших данныхset:

array.filter( function(d){ // your filter code here } )

В контексте:

group.selectAll("circle")
    .data( ds.filter(function(d) {return d.param1 != undefined}) )
    .enter()
    .append("circle")  

Тот же принцип применяется к участку площади:

group.append("path")
    .attr("class","area")
    .datum( ds.filter(function(d){ return d.param2 != undefined }) )
    .attr("d",area);

Данные намного легче манипулировать, прежде чем онипривязан к DOM, поэтому делайте как можно больше очистки и фильтрации.