Svg 图例：未显示的行
Posted
技术标签:
【中文标题】Svg 图例：未显示的行【英文标题】：Svg legend: line not shown 【发布时间】：2020-12-19 01:47:24 【问题描述】：我正在使用 d3-svg-legend (https://d3-legend.susielu.com/) 根据大小创建图例。我想复制这个例子：https://d3-legend.susielu.com/#size-line
我使用的代码是：
let svg = d3.select(this.refs.canvas).append('svg');
const g = svg.append("g");
var lineSize = d3.scaleLinear().domain([0,10]).range([2, 10]);
g.attr("transform", "translate(20,20)")
.call(legendSize()
.scale(lineSize)
.shape("line")
.orient("horizontal")
.shapeWidth(40)
.labelAlign("start")
.shapePadding(10)
);
此代码产生以下输出：
<div style="margin-left: auto; margin-right: 20px;">
<svg>
<g transform="translate(20,20)">
<g class="legendCells"><g class="cell" transform="translate(0, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(153, 216, 201);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">0.0</text></g><g class="cell" transform="translate(50, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(211, 74, 65);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">2.5</text>
</g>
<g class="cell" transform="translate(100, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">5.0</text>
</g>
<g class="cell" transform="translate(150, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">7.5</text>
</g>
<g class="cell" transform="translate(200, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">10.0</text>
</g>
</g>
</g>
</svg>
</div>
但它不显示除标签以外的任何图例（即不显示线条元素）：
【问题讨论】：
【参考方案1】：如果您查看相同的示例，您会看到她正在使用<head> 中的<style> 标记设置笔画：
.legendSizeLine line
stroke: rgb(46, 73, 123);
这是必要的，因为默认的<line> 笔划是"none"。
这是您的 SVG 样式：
line
stroke: rgb(46, 73, 123);
text
font: 12px sans-serif;
<div style="margin-left: auto; margin-right: 20px;">
<svg>
<g transform="translate(20,20)">
<g class="legendCells">
<g class="cell" transform="translate(0, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(153, 216, 201);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">0.0</text>
</g>
<g class="cell" transform="translate(50, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(211, 74, 65);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">2.5</text>
</g>
<g class="cell" transform="translate(100, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">5.0</text>
</g>
<g class="cell" transform="translate(150, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">7.5</text>
</g>
<g class="cell" transform="translate(200, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke- style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">10.0</text>
</g>
</g>
</g>
</svg>
</div>【讨论】：
以上是关于Svg 图例：未显示的行的主要内容，如果未能解决你的问题，请参考以下文章