Фильтрация данных для sankey-диаграмм d3.js

Я пытаюсь использовать визуализацию d3.js Sankey, фильтрующую набор данных по категориям.

Я использую метод d3.csv для ввода данных, как показано в этом примере - http://bl.ocks.org/timelyportfolio/5052095

введите описание изображения здесь

Однако я хотел бы загрузить набор данных с четырьмя столбцами -

источник, цель, значение, категория

Моя цель - получить визуализацию с возможностью переключения между категориями. Таким образом, каждая визуализация Санки будет представлять только одну конкретную категорию. Затем пользователь может переключиться из раскрывающегося списка в другое.

Возможно ли это при использовании текущего метода ввода d3.csv?


d3.js sankey-diagram
person Kamal Hothi    schedule 02.09.2013    source источник
comment
Итак, вам нужна помощь в создании визуализации или адаптации содержимого файла csv, чтобы вы могли добавить столбец категории?   -  person Barnabé Monnot    schedule 02.09.2013

Ответы (2)


arrow_upward
4
arrow_downward

Это сработает?

d3.csv("file.csv", function(data) {
    [...]

    // Called each time there is an action on the dropdown menu
    function updateGraph() {
         // Select only data that are tagged with a certain category
         var dataset = data.filter(function(d) { return d.category == selectedCategory; });
         // Update graph visualization
    }
}

Таким образом, вам не придется каждый раз перезагружать CSV-файл.

person Barnabé Monnot    schedule 02.09.2013
comment
Спасибо, что ответил на мой вопрос. Однако у меня есть еще один вопрос относительно функции selectedCategory. Как мне изменить это в раскрывающемся списке. Извините, я все еще изучаю js и d3. Ваше здоровье. - person Kamal Hothi; 03.09.2013
comment
Для этого я бы порекомендовал jQuery, особенно если вы используете некоторые компоненты Bootstrap (см. Раскрывающийся список и это хороший способ, если вы новичок в веб-приложениях (это тот путь, который я выбрал, и он действительно помог мне ускорить работу). Вам нужно будет проверить, какая опция раскрывающегося меню активна. - person Barnabé Monnot; 03.09.2013

arrow_upward
0
arrow_downward

Это очень длинный метод для второй части, но он создает несколько файлов html / php и csv в зависимости от ваших категорий, а затем добавляет следующий код в каждый из ваших файлов html / php. Этот метод будет лишним, если у вас много категорий.

<a href="Category 1.php">Category 1</a> 
<a href="Category 2.php">category 2</a>

Если вы нашли решение так, как пытались, то, если возможно, обновите свой ответ. это было бы полезно.

Спасибо.

person user87742    schedule 07.03.2016