Search code examples
d3.jssvglinelegend

Svg legend: line not shown

I am using d3-svg-legend ( https://d3-legend.susielu.com/) to create a legend based on size. I want to replicate this example: https://d3-legend.susielu.com/#size-line

The code I am using is:

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)
  );

This code produces the following output:

<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>

But it doesn't display any legend other than the labels (i.e. it doesn't display the line elements):

Code output

Solution

  • If you look at the same example, you'll see that she's setting the stroke using a <style> tag in the <head>:

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

    That's necessary because the default <line> stroke is "none".

    Here is your SVG with that style:

    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>