使用d3 svg对齐文本

Question

我在使用d3库时遇到了一些问题，因为我是新手。我使用了渐变example，将线性渐变插入到页脚div元素中。

    #footer {
      position: absolute;
      z-index: 10;
      bottom: 10px;
      left: 50%;
      width: 300px;
      margin-left: -150px;
      height: 20px;
      border: 2px solid black;
      background: rgba(12, 12, 12, 0.8);
      color: #eee;
    }

var svg = d3.select("footer")
    .append("svg:svg")
    .attr("width", 300)//canvasWidth)
    .attr("height", 20);

svg.append("rect")
    .attr("width", 300)
    .attr("height", 20)
    .style("fill", "url(#linear-gradient)");

var defs = svg.append("defs");


var linearGradient = defs.append("linearGradient")
    .attr("id", "linear-gradient");

linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#ffa474"); 

linearGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#8b0000");

如何在渐变条的两侧插入文本"a"和"b"，使文本位于条内并与左右两侧对齐，同时出现在颜色上方？我尝试在div元素中添加文本，但这只会“推开”渐变条。

- the_darkside

Answer 1

您可以使用 text-anchor 来定位您的文本元素。对于第一个文本，请将 text-anchor 设置为 start。对于最后一个文本，请将 text-anchor 设置为 end：

svg.append("text")
    .attr("text-anchor", "start")
    .attr("x", 4)//padding of 4px
    .attr("y", 14)
    .text("a");

svg.append("text")
    .attr("text-anchor", "end")
    .attr("x", 296)//padding of 4px
    .attr("y", 14)
    .text("b");

这里有一个演示：

var svg = d3.select("#footer")
    .append("svg:svg")
    .attr("width", 300)//canvasWidth)
    .attr("height", 20);
  
var defs = svg.append("defs");

var linearGradient = defs.append("linearGradient")
    .attr("id", "linear-gradient");

linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#ffa474"); 

linearGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#8b0000");

svg.append("rect")
    .attr("width", 300)
    .attr("height", 20)
    .style("fill", "url(#linear-gradient)");
  
svg.append("text")
 .attr("text-anchor", "start")
 .attr("x", 4)
 .attr("y", 14)
 .text("a");
 
svg.append("text")
 .attr("text-anchor", "end")
 .attr("x", 296)
 .attr("y", 14)
 .text("b");

#footer {
      position: absolute;
      z-index: 10;
      bottom: 10px;
      left: 50%;
      width: 300px;
      margin-left: -150px;
      height: 20px;
      border: 2px solid black;
      background: rgba(12, 12, 12, 0.8);
      color: #eee;
    }

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="footer"></div>

- Gerardo Furtado