Добавить метку «меры» на маркерную диаграмму D3

Question

Я работаю с маркером D3 и пытаюсь выяснить, как отображать фактические числа мер справа от прямоугольника мер. Поскольку я хочу сделать это для каждой диаграммы пули, я полагаю, что лучше всего сделать это прямо в коде bullet.js. Я довольно новичок в D3, поэтому любая помощь будет высоко оценена! Here - это ссылка на пример с пулевым примером Майка Бостока с включенным снизу bullet.js.

Похоже меры код обрабатывается в этом фрагменте:

// Update the measure rects. 
      var measure = g.selectAll("rect.measure") 
       .data(measurez); 

      measure.enter().append("rect") 
       .attr("class", function (d, i) { return "measure s" + i; }) 
       .attr("width", w0) 
       .attr("height", height/3) 
       .attr("x", reverse ? x0 : 0) 
       .attr("y", height/3)      
       .transition() 
       .duration(duration) 
       .attr("width", w1) 
       .attr("x", reverse ? x1 : 0); 

      measure.transition() 
       .duration(duration) 
       .attr("width", w1) 
       .attr("height", height/3) 
       .attr("x", reverse ? x1 : 0) 
       .attr("y", height/3); 

Я думал, что я мог бы просто добавить что-то вроде этого после того, как прямоугольник добавляется, но у меня не было такой удачи.

measure.enter().append("text") 
.attr("dy", "1em") 
.text(function (d) { return d.measurez; }) 
.attr("x", reverse ? x0 : 0) 
.attr("y", height/3) 
.transition() 
.duration(duration) 
.attr("width", w1) 
.attr("x", reverse ? x1 : 0); 

Заранее благодарим за внимание!

Answer 1

Вы почти получили его - есть всего две вещи, которые нужно учитывать. Во-первых, вы не можете позвонить .enter() дважды. После того, как будет введен режим ввода, он будет объединен с выбором обновления, и ваш второй выбор будет пустым. Это легко фиксируется путем сохранения выбора в переменной, но в этом случае я бы рекомендовал сделать отдельный выбор для текстовых меток.

var measureLabel = g.selectAll("text.measure") 
     .data(measurez); 
measureLabel.enter()....; 

Во-вторых, чтобы расположить текст справа от rect, вы должны принять не только положение, но и ширину во внимание при расчете положения text элемента. Кроме того, вы можете опустить несколько элементов, которые не относятся к элементам text.

measureLabel.enter() 
     .append("text") 
     .attr("class", function(d, i) { return "measure s" + i; }) 
     .attr("dy", "1em") 
     .attr("dx", "1em") 
     .text(String) 
     .attr("x", reverse ? function(d) { return w0(d) + x0(d); } : w0) 
     .attr("y", height/3); 

    measureLabel.transition() 
     .duration(duration) 
     .attr("x", reverse ? function(d) { return w1(d) + x1(d); } : w1); 

Полный пример here.