Параллельные координаты с d3.js

Мне нужно представить параллельные координаты с d3.js. Прежде всего, я понятия не имею, возможно ли достичь того, что я думаю (и являются ли параллельные координаты правильной диаграммой). Я объясню свою идею: я беру данные из базы данных, выставляю их в формате JSON и сохраняю в массиве объектов (с помощью JavaScript). Это пример данных http://pastebin.com/DZcMqDMc. Я хотел бы представить по оси абсцисс годы (хотя есть годы, повторяющиеся, как вы можете видеть из примера данных), а по оси ординат значения этих лет (значения указаны в процентах, в диапазоне от 1 до 100). Я хотел бы представить две строки в соответствии со свойствами «value1» и «value2» в файле JSON. Является ли это возможным? Параллельные координаты - это правильная диаграмма?

Основная проблема, с которой я столкнулся сейчас, заключается в том, что я не понимаю, как правильно установить два домена (абсциссу и ординату). Я основываюсь на примере Parellel Coordinates Bostock.

Для абсцисс я думаю что-то вроде этого:

x.domain(
    d3.extent(test, 
        function(d) {
            return d.years;
        }
    )
);

Это имеет смысл или?


javascript d3.js parallel-coordinates
person lezan    schedule 04.06.2016    source источник
comment
Да, вполне возможно создать карту параллельных координат с помощью d3. Но то, что вы описываете, технически является линейной диаграммой, а не параллельными координатами: диаграмма параллельных координат тесно связана с визуализацией временных рядов, за исключением того, что она применяется к данным, где оси не соответствуют моментам времени, и поэтому не имеют естественного порядка. В настоящей компьютерной диаграмме вы можете изменить порядок вертикальных осей по своему усмотрению.   -  person Gerardo Furtado    schedule 05.06.2016
comment
@GerardoFurtado, то, что ты сказал, было именно тем, о чем я думал. Спасибо, что указали мне правильный путь.   -  person lezan    schedule 06.06.2016

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте использовать многолинейную диаграмму. Это может вам подойти. Я не уверен, что вы пытаетесь.

person mcsekar    schedule 04.06.2016
comment
Привет, если кто-нибудь может помочь решить проблемы с этими параллельными координатами - stackoverflow.com/questions/49329600/ или stackoverflow.com/questions/49334965/ . Это было бы большим подспорьем. Заранее спасибо. - person Harshit Laddha; 17.03.2018

arrow_upward
0
arrow_downward

Просто сделайте линейную диаграмму и создайте вертикальные линии, отформатировав тики от 0 до высоты (в коде var xAxis включите .tickSize(0-height)). Вам нужно будет выбрать правильное количество тиков, как в ticks(), чтобы вы просто получили строки там, где хотите.

person John Burrett    schedule 06.08.2016
comment
Привет, если кто-нибудь может помочь решить проблемы с этими параллельными координатами - stackoverflow.com/questions/49329600/ или stackoverflow.com/questions/49334965/ . Это было бы большим подспорьем. Заранее спасибо. - person Harshit Laddha; 17.03.2018

arrow_upward
0
arrow_downward

Ознакомьтесь с Parcoords, библиотекой параллельных координат на основе d3. Для совместимости с d3 v5 см. https://github.com/BigFatDog/parcoords-es, который основан на исходной библиотеке Parcoords (https://github.com/syntagmatic/parallel-coordinates), который основан на устаревшей версии d3.

Примеры и пример кода см. по следующей ссылке: http://syntagmatic.github.io/parallel-coordinates/.

person Billy Raseman    schedule 14.11.2018