Question

参考此图，我想在每个数据点的文本值中插入换行符

var labels = svg.selectAll('text')
  .data(monthlySales)
  .enter()
  .append('text')
  .text(function(d) {
    return d.stock + "\n " + d.count;
  }).

我目前有类似上述内容。它不会在空格中插入任何换行符。

我研究了这个，并看到了一些复杂的解决方案。有没有直接的方法来实现这个目标？

Plnkr：http://plnkr.co/edit/B33mAZPMdTRTm6imHxYq?p=info

Answer 1

你可以这样做：

//lets create the label
    var labels = svg.selectAll('text')
      .data(monthlySales)
      .enter()
      .append('text')
      .append("tspan")
      .text(function(d) {
        return d.stock;
      }).attr({
      x: function(d, i) {
        var ordValue = ordinalValue(d.stock);
        return xScale(ordValue);
      },
      y: function(d, i) {
        return yScale(d.count);
      },
      "text-anchor": 'middle',
      "font-size": 10,
      "font-family": "sans-serif"
    });
    //lets create the count label
    svg.selectAll('text').append("tspan")
      .text(function(d) {
        return d.count;
      }).attr({
      x: function(d, i) {
        var ordValue = ordinalValue(d.stock);
        return xScale(ordValue);
      },
      y: function(d, i) {
        return yScale(d.count)+ 10;//to show it below the other label
      },
      "text-anchor": 'middle',
      "font-size": 10,
      "font-family": "sans-serif"
    });

此处的工作代码（代码中的注释可帮助）： http://plnkr.co/edit/xDthPgsMfoGTSouVIie8?p=preview

在d3中的文本元素中插入换行符

1 个答案: