javascript - 如何使计数永久显示在图表条的末尾？

Question

我在这里有这段代码的工作 fiddle 。我正在尝试 d3。为了立即显示计数，我正在使用工具提示。所以它在鼠标悬停时显示值。如何将文本附加到条形图上，以便永久显示计数，而与任何鼠标事件无关。

Here is the working fiddle

 rects = groups.selectAll('rect')
    .data(function (d) {
    return d;
})
    .enter()
    .append('rect')
    .attr('x', function (d) {
    return xScale(d.x0);
})
    .attr('y', function (d, i) {
    return yScale(d.y);
})
    .attr('height', function (d) {
    return yScale.rangeBand();
})
    .attr('width', function (d) {
    return xScale(d.x);
})
        .attr('class', function (d) {
    if(d.month == 'Open/New'){
        return 'hm-statusNew';
    }else if(d.month == 'In Progress'){
        return 'hm-inProgress';
    }else{
        return 'hm-completed';
    }
})
    .on('mouseover', function (d) {
    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
        .style('left', xPos + 'px')
        .style('top', yPos + 'px')
        .select('#value')
        .text(d.x);

    d3.select('#tooltip').classed('hidden', false);
})
    .on('mouseout', function () {
    d3.select('#tooltip').classed('hidden', true);
})

Answer 1

试试这个方法:-

groups.selectAll('.bartext')
  .data(function(d) {
    return d;
  })
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "end")
  .attr("fill", "white")
  .attr('x', function(d) {
    return xScale(d.x0) + xScale(d.x);
  })
  .attr('y', function(d, i) {
    return yScale(d.y) + yScale.rangeBand() / 2;
  })
  .text(function(d) {
    return d.x;
  });

var margins = {
    top: 12,
    left: 48,
    right: 24,
    bottom: 24
  },
  legendPanel = {
    width: 180
  },
  width = 600 - margins.left - margins.right - legendPanel.width,
  height = 200 - margins.top - margins.bottom,
  dataset = [{
      data: [{
        month: 'Open/New',
        count: 123
      }, {
        month: 'In Progress',
        count: 234
      }, {
        month: 'Completed',
        count: 345
      }],
      name: 'Series #1'
    }

  ],
  series = dataset.map(function(d) {
    return d.name;
  }),
  dataset = dataset.map(function(d) {
    return d.data.map(function(o, i) {
      // Structure it so that your numeric
      // axis (the stacked amount) is y
      return {
        y: o.count,
        x: o.month
      };
    });
  }),
  stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function(group) {
    return group.map(function(d) {
      // Invert the x and y values, and y0 becomes x0
      return {
        x: d.y,
        y: d.x,
        x0: d.y0
      };
    });
  }),
  svg = d3.select('body')
  .append('svg')
  .attr('width', width + margins.left + margins.right + legendPanel.width)
  .attr('height', height + margins.top + margins.bottom)
  .append('g')
  .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
  xMax = d3.max(dataset, function(group) {
    return d3.max(group, function(d) {
      return d.x + d.x0;
    });
  }),
  xScale = d3.scale.linear()
  .domain([0, xMax])
  .range([0, width]),
  months = dataset[0].map(function(d) {
    return d.y;
  }),
  yScale = d3.scale.ordinal()
  .domain(months)
  .rangeRoundBands([0, height], .1),
  xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom'),
  yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left'),
  colours = d3.scale.category10(),
  groups = svg.selectAll('g')
  .data(dataset)
  .enter()
  .append('g')
  .style('fill', function(d, i) {
    return colours(i);
  }),
  rects = groups.selectAll('rect')
  .data(function(d) {
    return d;
  })
  .enter()
  .append('rect')
  .attr('x', function(d) {
    return xScale(d.x0);
  })
  .attr('y', function(d, i) {
    return yScale(d.y);
  })
  .attr('height', function(d) {
    return yScale.rangeBand();
  })
  .attr('width', function(d) {
    return xScale(d.x);
  })
  .attr('class', function(d) {
    if (d.month == 'Open/New') {
      return 'hm-statusNew';
    } else if (d.month == 'In Progress') {
      return 'hm-inProgress';
    } else {
      return 'hm-completed';
    }
  })
  .on('mouseover', function(d) {
    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
      .style('left', xPos + 'px')
      .style('top', yPos + 'px')
      .select('#value')
      .text(d.x);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function() {
    d3.select('#tooltip').classed('hidden', true);
  });

groups.selectAll('.bartext')
  .data(function(d) {
    return d;
  })
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "end")
  .attr("fill", "white")
  .attr('x', function(d) {
    return xScale(d.x0) + xScale(d.x);
  })
  .attr('y', function(d, i) {
    return yScale(d.y) + yScale.rangeBand() / 2;
  })
  .text(function(d) {
    return d.x;
  });

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis);

.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
#tooltip {
    position: absolute;
    text-align: center;
    width: 40px;
    height: auto;
    padding: 5px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
#tooltip.hidden {
    display: none;
}
#tooltip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="tooltip" class="hidden">
    <p><span id="value">100</span>
    </p>
</div>