Made with d3.annotation. An example showing how to add an outline around components.
Last active
April 21, 2017 17:14
-
-
Save susielu/9162f082e6b5c740e4c2e84b2733a15c to your computer and use it in GitHub Desktop.
d3-annotation: outline
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .DS_Store |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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'> | |
| <style> | |
| body{ | |
| background-color: whitesmoke; | |
| } | |
| :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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment