d3-annotation: outline

Example with outline around annotations

Made with d3.annotation. An example showing how to add an outline around components.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

:root {
      --annotation-color: #E8336D;
    }

svg {
        background-color: #2f2f2f;
        font-family: 'Lato';
     }

.annotation path {
      stroke: var(--annotation-color);
      stroke-width: 3px;
      fill: none;
      stroke-linecap: round;
    }

.annotation path.connector-arrow, 
    .annotation path.connector-dot, 
    .title text, .annotation text {
      fill: var(--annotation-color);
      stroke: var(--annotation-color);
    }

.annotation text {
      stroke-width: 1px;
    }

.annotation-note-bg {
      fill: rgba(0, 0, 0, 0);
    }

.annotation-note-title, text.title {
      font-weight: bold;
    }

text.title {
      font-size: 1.2em;
    }

g.outline .annotation path {
      stroke: white;
      stroke-width: 5px;
      stroke-linecap: round;
    }

g.outline .annotation text {
      stroke: white;
      fill: white;
      stroke-width: 3px;
    }

</style>
</head>
<body>
    <svg width=960 height=500>
    </svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js"></script>
    <script>
      const annotations = [
        {
          note: {
            label: "Basic settings with subject position(x,y) and a note offset(dx, dy)",
            title: "d3.annotationLabel"
          },
          x: 50,
          y: 150,
          dy: 137,
          dx: 162
        },
        {
          note: {
            label: "Added connector end 'arrow', note wrap '180', and note align 'left'",
            title: "d3.annotationLabel",
            wrap: 150,
            align: "left"
          },
          connector: {
            end: "arrow" // 'dot' also available
          },
          x: 170,
          y: 150,
          dy: 137,
          dx: 162
        }
        ]

const makeAnnotations = d3.annotation()
          .type(d3.annotationLabel)
          .annotations(annotations)

d3.select("svg")
          .append("g")
          .attr("class", "annotation-group outline")
          .call(makeAnnotations)

d3.select("svg")
          .append("g")
          .attr("class", "annotation-group")
          .call(makeAnnotations)

</script>
</body>
</html>

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js