D3.js Svg图例：未显示行

我正在使用D3SVG图例（）根据大小创建图例。我想复制这个例子：

我使用的代码是：

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>

0
2.5
5
7.5
10

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

---

如果你看同一个例子，你会看到她正在使用

中的

标记设置笔划：

这是必需的，因为默认的

笔划是

“无”

以下是您使用该样式的SVG：

行{
中风：rgb（46,73,123）；
}
正文{
字体：12px无衬线；
}

0
2.5
5
7.5
10

.legendSizeLine line {
  stroke: rgb(46, 73, 123);
}