html - 在 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 元素中添加文本，但这只会将渐变条“推”到一边

Answer 1

您可以使用 text-anchor 定位您的文本元素。对于第一个文本，设置 text-anchor 开始。最后一个，设置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>