在d3 svg中对齐文本

我刚到图书馆，在D3的一个简单的任务中遇到了麻烦。
使用渐变，我在footer 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");

example
如何在渐变的任一侧插入文本“a”和“b”，使文本在显示在颜色上方时位于条内并与左右两侧对齐？我尝试在DIV元素中添加文本，但这只会将渐变条“推”到一边。

最佳答案：

可以使用text-anchor定位文本元素。对于第一个文本，将text-anchor设置为Start。对于最后一个，将text-anchor设置为结束：

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>