Question

在d3中解决问题时遇到问题 - 我试图在我的svg中添加一个图例，并且我需要将其中的文本分开，因此只有d.key被着色为colorScale和d.total在d.key下面，填充是＆＃34;黑色＆＃34;。

这里是我刚才提到的代码行 - .text(function(d) { return (d.key) + ' (' + d.total + ')'; })

简而言之，我如何在d.key下面添加另一行文本并填写这个新文本＆＃34; black＆＃34;或者不是像d.key那样的colorScale被着色。

＆＃13;

svg.append("g")
        .attr("class", "legend")
          .selectAll("text")
          .data(layers)
            .enter().append("text")
              .text(function(d) { return (d.key) + ' (' + d.total + ')'; })
              .attr('fill', function(d) { return colorScale(d.key); })
              .attr('y', function(d, i) { return 50 * (i + 2.75); })
              .attr('x', "375");

＆＃13;

Answer 1

执行此操作的方法有多少。包含在text中的两个单独的g元素或我在下面显示的内容是包含在tspan中的两个text：

var svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

var layers = [
  {
    key: 'one',
    total: 10
  }, {
    key: 'two',
    total: 20
  }
];

var colorScale = d3.scale.category10();

var text = svg.append("g")
  .attr("class", "legend")
  .selectAll("text")
  .data(layers)
  .enter().append("text")
  .attr('y', function(d, i) { return 50 * (i + 2.75); })

text.append("tspan")
  .text(function(d) { return (d.key) + ' (' + d.total + ')'; })
  .attr('fill', function(d) { return colorScale(d.key); })  
  .attr('x', "375");

text.append("tspan")
  .attr("dy", "1.2em")
  .attr("x", "375")
  .text("Second row of text")
  .style("fill", "black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

SVG元素 - 处理和选择文本

1 个答案: