d3.js гистограмма: .text не отображается

Я строю простую гистограмму, используя d3.js, и она отлично работает. Однако, когда я пытаюсь отображать тексты на каждом баре, ничего не происходит. Консоль не возвращает никаких ошибок, поэтому я не могу понять проблему. Мой код доступен here, я попытался отобразить простой текст, например «Привет», но пока ничего не появляется.d3.js гистограмма: .text не отображается

источник

2016-04-24 cecelia

Где вы хотите, чтобы текст появился, и какое значение вы хотите получить для данной панели? –

Я хочу показать в конце каждого бара значение свободного (атрибут переменной freqData). – cecelia

Вы пробовали работать через этот учебник: http://alignedleft.com/tutorials/d3/making-a-bar-chart? Я понимаю, что учебник имеет вертикальную, а не горизонтальную диаграмму, но я надеюсь, что это по-прежнему полезно. Вы пытаетесь применить текстовые метки через selectAll на 'rect', а не selectAll на 'text'. –

Проблема:

прилагая текстов на rect элемент в SVG.

Решение:

Append тексты в SVG или группе.

Инструкция:

Вы добавляющие свои тексты на прямоугольники. Ничто не будет отображаться как ошибка в консоли, потому что нет никакой ошибки, чтобы показать, но тексты не будут отображаться.

Вы должны создать переменную для текстов:

var texts = svg.selectAll(".mytexts") 
          .data(data) 
          .enter() 
          .append("text");

а затем установив атрибуты:

texts.attr("class", "value") 
       .attr("x", function(d) { return widthScale(d.vacant); }) 
       .attr("y", heightScale.rangeBand()/2) 
       .attr("dx", -3) 
       .attr("dy", ".35em") 
       .attr("text-anchor", "end") 
       .text(function(d) { return format(d.vacant); });

Не забудьте изменить CSS соответственно.

источник

2016-04-24 23:49:31

Очень хорошее объяснение !!!! Бесконечно благодарен! Все работает сейчас, я действительно не понимал, как связывать тексты с переменными переменной и svg. – cecelia

Не беспокойтесь! Для связывания текстов с прямоугольниками наилучшим подходом является создание групп ( элементов в svg). –

d3.js гистограмма: .text не отображается

ответ

Смежные вопросы