Svg 图例：未显示的行答案

【问题标题】：Svg legend: line not shownSvg 图例：未显示的行
【发布时间】：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-width="2" 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-width="4" 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-width="6" 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-width="8" 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-width="10" 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>

但它不显示除标签以外的任何图例（即不显示线条元素）：

【问题讨论】：

标签： d3.js svg line legend

【解决方案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-width="2" 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-width="4" 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-width="6" 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-width="8" 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-width="10" 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>

【讨论】：