D3JS Изменение данных столбца данных TSV

Question

Я только что нарисовал диаграмму с разбивкой по областям с D3JS. This is my referral implementation

Мне также необходимо динамически менять порядок слоев. Я думаю, что нет возможности сделать это динамически без перерисовки (или есть ли?: D)

Фактически я пытаюсь сопоставить данные с новым столбцом заголовка, но это подразумевает перерисовку.

Позвольте мне показать вам пример: Вот TSV заголовок [ «дата», «Columna», «columnB», «columnC»] Каждый столбец, за исключением «даты», представляют собой% площади для это образец.

Я хотел бы, чтобы динамически переставить слои площадь, но я уверен, что мне нужно, чтобы разобрать снова данные с новым заголовком например,

['date', 'columnA', 'columnB', 'columnC'] 
-map to- 
['date','columnB', 'columnC', 'columnA'] 

, а затем сделать результат.

Я делаю это правильно? Спасибо за вашу поддержку, приветствия.

Answer 1

Это линия, которая определяет массив, который будет передан функции stack():

var keys = data.columns.slice(1); 

Прямо сейчас, это массив:

["Google Chrome","Internet Explorer","Firefox","Safari","Microsoft Edge","Opera","Mozilla","Other/Unknown"] 

Но вы можете сортировать все равно вам хотеть. Например, сортировка по алфавиту:

keys.sort(); 

Который дает нам:

["Firefox","Google Chrome","Internet Explorer","Microsoft Edge","Mozilla","Opera","Other/Unknown","Safari"] 

Вот результат: https://bl.ocks.org/anonymous/6a339ed0731a70bb234af150ee6b4a99

Вот еще один, со случайной перестановкой (обновите страницу в см. различные порядки): https://bl.ocks.org/anonymous/662f99901219b8907030ec3c84363f3a

Обратите внимание на следующее: порядок в таблице с разбивкой по областям теперь отличается, но цвета не сохраняются то же для каждого браузера (т. е. для каждой уложенной области). Это потому, что d3.scaleOrdinal(d3.schemeCategory10) присваивает цвета в с первого взгляда, первый поданный.