Example Without Scales - d3.annotation
Made with d3.annotation. An example showing basic annotations with just pixel positioning and no scales.
.DS_Store |
Made with d3.annotation. An example showing basic annotations with just pixel positioning and no scales.
<!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; | |
} | |
svg { | |
background-color: white; | |
font-family: 'Lato'; | |
} | |
.annotation-note-title, text.title { | |
font-weight: bold; | |
} | |
text.title { | |
font-size: 1.2em; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width=960 height=500> | |
<text class="title" x=40 y=50>d3.annotation()</text> | |
<text x=40 y=80>Basic examples without scales</text> | |
</svg> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script src="https://rawgit.com/susielu/d3-annotation/master/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 | |
},{ | |
note: { | |
label: "Changed connector type to 'curve'", | |
title: "d3.annotationLabel", | |
wrap: 150 | |
}, | |
connector: { | |
end: "dot", | |
type: "curve", | |
//can also add a curve type, e.g. curve: d3.curveStep | |
points: [[100, 14],[190, 52]] | |
}, | |
x: 350, | |
y: 150, | |
dy: 137, | |
dx: 262 | |
},{ | |
//below in makeAnnotations has type set to d3.annotationLabel | |
//you can add this type value below to override that default | |
type: d3.annotationCalloutCircle, | |
note: { | |
label: "A different annotation type", | |
title: "d3.annotationCalloutCircle", | |
wrap: 190 | |
}, | |
//settings for the subject, in this case the circle radius | |
subject: { | |
radius: 50 | |
}, | |
x: 620, | |
y: 150, | |
dy: 137, | |
dx: 102 | |
}].map(function(d){ d.color = "#E8336D"; return d}) | |
const makeAnnotations = d3.annotation() | |
.type(d3.annotationLabel) | |
.annotations(annotations) | |
d3.select("svg") | |
.append("g") | |
.attr("class", "annotation-group") | |
.call(makeAnnotations) | |
</script> | |
</body> | |
</html> |