Блог

Я хочу создать гистограмму D3, используя D3 v5. Кажется, я нигде не могу найти это решение. Я хочу, чтобы высота столбика основывалась на объекте, который может динамически изменяться, а не на массиве, в котором столбчатые диаграммы D3 обычно основаны. Я смог добавить обе оси с соответствующими данными в SVG, но я не могу понять, как добавить столбцы в SVG с помощью объекта.

Например, мой объект

 let Obj = {
    red: 102,
    orange: 168,
    blue: 154,
    pink: 197
}
 

Для моих осей ось y равна от 0 до 200 (с использованием D3.nice()), а ось x — красная, оранжевая, синяя, розовая.

Любые предложения о том, как правильно добавлять столбцы?

Короткий ответ: вы не можете.

data() Метод D3 принимает только три вещи:

• Массив ¹;
• Функция;
• Ничего.

Если вы хотите использовать объект в качестве структуры данных, вам придется обойти selecion.data() , но тогда больше нет смысла использовать D3, то есть вы должны создать свой dataviz, используя простой Javascript.

Если вы все еще хотите придерживаться D3, преобразуйте объект в массив:

 let Obj = {
  red: 102,
  orange: 168,
  blue: 154,
  pink: 197
};

const data = Object.entries(Obj).map(([key, value]) => ({
  key: key,
  value: value
}));

console.log(data) 

^{1: начиная с версии D3 v6, data метод теперь принимает итеративные объекты, такие как TypedArray, NodeList, Map, Set и т.д.}