由于我是图书馆的新手,所以我在 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 元素中添加文本,但这只会将渐变条“推”到一边
最佳答案
您可以使用 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>
关于html - 在 d3 svg 中对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41396786/