Question

D3 noob问题：我有一个如下所示的水平条形图：

以下是产生它的代码：

function barChartInner(selection) {
    selection.each(function (data) {
      const colorScale = d3.scale.quantize()
        .domain([0, data.length])
        .range(colors);
      const maxVal = d3.max(data, d => +d.value);
      const widthScale = d3.scale.linear()
        .domain([0, maxVal])
        .range([0, width]);
      const svg = d3.select(this).selectAll('svg').data([data]);
      svg.enter().append('svg');
      svg.attr('width', width)
         .attr('height', height);

      const groups = svg.selectAll('g').data(data);
      const groupEnter = groups.enter().append('g');
      groupEnter.append('rect')
        .attr('width', 0)
        .attr('y', 0);
      groupEnter.append('text');
      groupEnter.append('text').classed(`${c.baseClass} user-answer`, true);
      groupEnter.append('text').classed(`${c.baseClass} count`, true);
      groups.style('transform', (d, i) => `translateY(${i * (barHeight + barMargin * 6)}px)`);

      const rects = svg.selectAll('g rect');
      const labelWidth = 0;
      const valueMargin = 4;

      rects
        .attr('x', 100)
        .attr('height', barHeight)
        .attr('fill', (d, i) => (
          userAnswers && userAnswers.indexOf(i) > -1
            ? c.colors.userColor
            : colorScale(i)
        ));
      rects.transition()
        .duration(1000)
        .attr('width', d => widthScale(+d.value));

      svg.selectAll('g text')
        .attr('fill', c.colors.black)
        .style('font-family', c.fontStack)
        .attr('dy', '.35em')
        .attr('x', 90)
        .attr('y', barHeight / 2)
        .attr('text-anchor', 'end')
        .text(d => d.name);

      if (userAnswers) {
        console.log('userAnswers');
        console.log(userAnswers);
        svg.selectAll('g text.user-answer')
          .attr('fill', c.colors.black)
          .style('font-family', c.fontStack)
          .attr('dy', '.35em')
          .attr('x', d => widthScale(+d.value))
          .attr('y', barHeight + 10)
          .attr('text-anchor', 'start')
          .text((d, i) => (userAnswers.indexOf(i) > -1 ? 'Your answer' : ''));
      }
    });
  }

我试图将数据中的值添加到右侧每个栏的末尾。这是块：

svg.selectAll('g text.count')
    .attr('fill', c.colors.black)
    .style('font-family', c.fontStack)
    .attr('dx', -valueMargin + labelWidth) // margin right        
    .attr('dy', '.35em')
    .attr('x', 725)
    .attr('y', barHeight / 2)
    .attr('text-anchor', 'start')
    .text(d => d.value);

此块位于处理图形左侧数据的块之后。但它并没有在图表中呈现出来。我确定数据是有效的，因为如果我用d.value将早期的块（＆＃39; g文本＆＃39;）分出来，我会看到左侧的值。那么为什么这个块没有呈现出来呢？

为D3水平条形图添加值

0 个答案: