Скрыть точки данных в точечной диаграмме nvd3.js по форме

Question

Я успешно построил точечную диаграмму с несколькими сериями в nvd3.js. nvd3.js предоставляет механизмы для включения / выключения рядов, определенных "ключом" в моих данных. Можно ли сделать то же самое с помощью назначенных фигур (например, крест, круг и т. Д.)? Я могу выбрать все точки данных со сложной формой:

var series = d3.selectAll('.nv-series')
    .data();
for (var i = 0; i < series.length; i++) {
    var values = series[i].values;
    for (var j = 0; j < values.length; j++) {
        if (values[j].shape=='circle') {
              // Do something with 

        }
    }
}

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

Answer 1

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

//clone data
filteredData = jQuery.extend(true, {}, allData);
for (var i = 0; i < filteredData.length; i++) {
    var values = filteredData[i].values;
    for (var j = 0; j < values.length; j++) {
        if (values[j].shape!=shape) {
            filteredData[i].values.splice(j,1);
            j--;

        }
    }
}

d3.select('#test1 svg').datum(filteredData);
chart.update();

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

Answer 2

Ты можешь использовать filter выделите нужные элементы (вместо зацикливания), а затем используйте css, чтобы скрыть фигуры, которые вы хотите скрыть.

d3.selectAll('.nv-point').filter(function(d){ return d.shape === 'circle' })
  .classed('hidden-point', true);

В этом примере hidden-point класс будет содержать visibility: none или некоторый подобный стиль, который скрывает пункты с этим классом. d3.selectAll('.hidden-point').classed('hidden-point', false) покажет все скрытые точки.