Question

我已经创建了一个图表并且工作正常，但我无法找到如何向列添加数字。只有悬停列时才会显示数字。试过不同的变种：

svg.selectAll("text").
data(data).
enter().
append("svg:text").
attr("x", function(datum, index) { return x(index) + barWidth; }).
attr("y", function(datum) { return height - y(datum.days); }).
attr("dx", -barWidth/2).
attr("dy", "1.2em").
attr("text-anchor", "middle").
text(function(datum) { return datum.days;}).
attr("fill", "white");

指向我的示例的链接：https://jsfiddle.net/rinatoptimus/db98bzyk/5/

Answer 1

@gerardofurtado的替代想法是代替rect追加g，然后将文本和矩形组合在一起。这可以防止需要双数据绑定。

var bars = svg.selectAll(".bar")
  .data(newData)
  .enter().append("g")
  .attr("class", "bar")
  // this might be affected:
  .attr("transform", function(d, i) {
    return "translate(" + i * barWidth + ",0)";
  });

bars.append("rect")
  .attr("y", function(d) {
    return y(d.days);
  })
  .attr("height", function(d) {
    return height - y(d.days) + 1;
  })
  .style({
    fill: randomColor
  }) // color  bars
  .attr("width", barWidth - 1)
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

bars.append("text")
  .text(function(d) {
    return d.days;
  })
  .attr("y", function(d) {
    return y(d.days);
  })
  .attr("x", barWidth / 2)
  .style("text-anchor", "middle");

更新了fiddle。

Answer 2

执行此操作时：

svg.selectAll("text")

您正在选择SVG中已存在的文本元素。在输入选择中，选择不存在的内容非常重要：

svg.selectAll(".text")
    .data(newData)
    .enter()
    .append("svg:text")
    .attr("x", function(datum) {
        return x(datum.name) + x.rangeBand()/2
    })
    .attr("y", function(datum) {
        return y(datum.days) - 10;
    })
    .attr("text-anchor", "middle")
    .text(function(datum) {
        return datum.days;
    })
    .attr("fill", "white");

这是你的小提琴：https://jsfiddle.net/c210osht/

Answer 3

您可以尝试使用d3fc bar series component，它允许您通过decorate pattern添加数据标签。

这是代码的样子：

var svgBar = fc.seriesSvgBar()
    .xScale(xScale)
    .yScale(yScale)
    .crossValue(function(_, i) { return i; })
    .mainValue(function(d) { return d; })
    .decorate(function(selection) {
      selection.enter()
        .append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(0, -10)")
        .text(function(d) { return d3.format(".2f")(d); })
        .attr("fill", "black");
    });

这是codepen with the complete example。

披露：我是d3fc项目的核心撰稿人！

如何使用D3.js为数字添加数字？

3 个答案: