d3 - сбросить цветовую шкалу при изменении данных

Question

d3 - сбросить цветовую шкалу при изменении данных

1

Я рисую пирог, используя d3, и используя следующее, чтобы заполнить срезы определенными цветами:

d3.scale.ordinal().domain([]).range(['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'])

Моя проблема возникает при замене одной круговой диаграммы для другой, которая по сути сводится к обмену данными. При этом вместо нового пирога, начинающегося с "# 2ECC71", он начинается с более позднего значения цвета, в зависимости от количества фрагментов; например, если использовались два ломтика, "новый" пирог после dataswap начинался с "# 12512c".

js framework: версия Vue.js d3: v3

Приветствия.

Santboi 15 июнь 2018, в 04:55

Источник

0

Итак, я понял проблему: доменные аргументы. const greenScale = ['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']; Сначала я попробовал d3.scale.ordinal().domain([0, greenScale.length]).range(greenScale) но это не сработало. Мои круговые диаграммы переходили от первого значения к четвертому. Тем не менее, я вернулся к документам и заметил, что значения домена могут быть сопоставлены 1-1 со значениями диапазона. Решение: d3.scale.ordinal().domain(_.range(greenScale.length)).range(greenScale)
Santboi 15 июнь 2018, в 15:03

Теги:

javascript

d3.js

vue.js

pie-chart

1 ответ

Ещё вопросы

Итак, я понял проблему: доменные аргументы. const greenScale = ['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']; Сначала я попробовал d3.scale.ordinal().domain([0, greenScale.length]).range(greenScale) но это не сработало. Мои круговые диаграммы переходили от первого значения к четвертому. Тем не менее, я вернулся к документам и заметил, что значения домена могут быть сопоставлены 1-1 со значениями диапазона. Решение: d3.scale.ordinal().domain(_.range(greenScale.length)).range(greenScale)

Lex · Answer 1 · 2018-06-15T01-21-00.000Z

Я предполагаю, что вы будете называть функцию масштаба и передавать value. Если у вас есть ключ категории или ключ индекса массива данных, вы получите согласованные результаты.

См. В приведенном ниже примере, пропуская притворяемые значения в функцию масштаба, каждый раз возвращает новые значения цвета. Как назначение нового значения ключу. При передаче того же значения (string или int) всегда возвращается тот же результат.

let colorScale = d3.scale.ordinal().domain([]).range(['#2ECC71', '#208E4E', '#12512C', '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'])

// new colour for each value
console.log(colorScale(50))
console.log(colorScale(10))
console.log(colorScale(100))

// new colours for each index
console.log(0, colorScale(0))
console.log(1, colorScale(1))
console.log(2, colorScale(2))

// using the colours already assigned to keys 0,1
console.log(0, colorScale(0))
console.log(1, colorScale(1))

// alternatively use category key values
console.log('Africa', colorScale('Africa'))
console.log('Africa', colorScale('Africa'))

console.log('America', colorScale('America'))
console.log('Australia', colorScale('Australia'))

console.log('America', colorScale('America'))
console.log('Australia', colorScale('Australia'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>