Как добавить текстовые метки к осям в d3?
Например, у меня есть простой линейный график с осями x и y.
На моей оси X есть отметки от 1 до 10. Я хочу, чтобы под ним появилось слово «дни», чтобы люди знали, что ось x ведет отсчет дней.
Точно так же на оси Y у меня есть числа от 1 до 10 в виде отметок, и я хочу, чтобы слова «съеденные сэндвичи» отображались боком.
Есть простой способ сделать это?
источник
.attr("transform", "rotate(-90)")
вызывает вращение всей системы координат. Таким образом, если вы позиционируете «x» и «y», вам нужно поменять местами позиции, которые я ожидал.В новой версии D3js (версия 3 года), при создании оси диаграммы с помощью
d3.svg.axis()
функции вы доступ к двум методам называютсяtickValues
иtickFormat
которые встроены внутри функции , так что вы можете определяешь , какие ценности вы нужны тики для и в каком формат, в котором должен отображаться текст:источник
Если вы хотите, чтобы метка оси Y находилась посередине оси Y, как я:
-50
)chartHeight / 2
)Пример кода:
Это предотвращает вращение всей системы координат, как упомянуто Любаром выше.
источник
Если вы работаете с d3.v4, как было предложено, вы можете использовать этот экземпляр, предлагающий все, что вам нужно.
Вы можете просто заменить данные оси X своими «днями», но не забудьте правильно анализировать строковые значения и не применять конкатенацию.
parseTime может также помочь с масштабированием дней с помощью формата даты?
скрипка с глобальным css / js
источник
D3 предоставляет довольно низкоуровневый набор компонентов, которые вы можете использовать для сборки диаграмм. Вам предоставляются строительные блоки, компонент оси, соединение данных, выбор и SVG. Ваша работа - собрать их вместе в диаграмму!
Если вам нужна обычная диаграмма, то есть пара осей, метки осей, заголовок диаграммы и область построения, почему бы не взглянуть на d3fc ? это набор компонентов D3 более высокого уровня с открытым исходным кодом. Он включает компонент декартовой диаграммы, который может вам пригодиться:
Вы можете увидеть более полный пример здесь: https://d3fc.io/examples/simple/index.html
источник
или
источник