在d3 svg中对齐文本

Question

我在d3中遇到了一个简单的任务,因为我是图书馆的新手.

使用渐变示例,我在页脚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>