Задать вопрос
@rinatoptimus

Как добавить текст в бар на D3.js?

Есть вертикальный график на D3.js:
https://rinatoptimus.github.io/my-linker-stat2/
Не пойму, как на стобликах вывести их значения, чтоб было как здесь:
alignedleft.com/content/03-tutorials/01-d3/130-mak...
Пробовал добавить:

svg.selectAll("text")
    .data(data.days)
    .enter()
    .append("text")
    .text(function(data){return data.days;
})
    .attr("text-anchor", "middle")
    .attr("x", function(data, i) {
        return i * (w / data.days.length) + (w / data.days.length - barPadding) / 2;
    })
    .attr("y", function(d) {
        return h - (data.days * 4) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "green");


Сами данные прописаны в коде:

data = {
    names: [
        "(1) Европа",
        "(2) Казань",
        "(3) Санкт-Петербург",
        "(4) Сочи",
        "(5) Екатеринбург",
        "(6) Нижний Новгород",
        "(7) Минск",
        "(8) Великий Устюг",
        "(9) Калининград",
        "(10) Кострома",
        "(11) Петрозаводск",
        "(12) Рязань",
        "(13) Симферополь",
        "(14) Тверь"
    ],
    days: [
        75,
        614,
        621,
        326,
        191,
        193,
        26,
        14,
        146,
        20,
        77,
        15,
        110,
        100
    ]
};


РЕШЕНИЕ: https://jsfiddle.net/db98bzyk/8/
  • Вопрос задан
  • 403 просмотра
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
kostyaostapuk
@kostyaostapuk
Так ты пропиши просто стили, чтобы не при наведении отображалось а статично отображалось в column
Ответ написан
@Stepanya
Что-то вроде этого
svg.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .text(function(data){return data.days;})
    .attr("text-anchor", "middle")
    .attr("x", function(data, i) {
        return  x(data.days);
    })
    .attr("y", function(d) {
        return h - (data.days * 4) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "green");
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 дек. 2024, в 14:07
15000 руб./за проект
22 дек. 2024, в 13:01
50000 руб./за проект
22 дек. 2024, в 10:44
15000 руб./за проект