smart-labels 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Smart Labels
|
|
2
|
+
|
|
3
|
+
Add nearest on-hover and labels when there is space to your D3 chart. It should be faster than force based versions as it uses d3-delaunay, and it will choose which labels to show based on the amount of space available in the chart.
|
|
4
|
+
|
|
5
|
+
Based on the [voronoi-labels](https://observablehq.com/@d3/voronoi-labels) example by [@mbostock](https://observablehq.com/@mbostock), and combining it with [@fil's](https://observablehq.com/@fil) great [occlusion](https://observablehq.com/@fil/occlusion) example.
|
|
6
|
+
|
|
7
|
+
Receives the data, accessors for the x and y coordinates as well as the label. Expects all the coordinates to come in pixels.
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/smart-labels"></script>
|
|
13
|
+
<script>
|
|
14
|
+
const svg = d3.create("svg")
|
|
15
|
+
// 𓈓 add your own marks (e.g. points), we will add the text labels
|
|
16
|
+
|
|
17
|
+
smartLabels(data, {
|
|
18
|
+
target: svg, // where to draw
|
|
19
|
+
label: (d) => d.name, // where to find the label in the data
|
|
20
|
+
x: (d) => xScale(d.x), // expected in pixels
|
|
21
|
+
y: (d) => yScale(d.y),
|
|
22
|
+
labelsInCentroids : true, // Draw the labels in the centroid of the voronoi
|
|
23
|
+
useOcclusion: true // Make occluded labels transparent
|
|
24
|
+
})
|
|
25
|
+
</script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Default options
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
{
|
|
32
|
+
x = (d) => d[0], // x coordinate accessor, expected to be in pixels
|
|
33
|
+
y = (d) => d[1], // y coordinate accessor, expected to be in pixels
|
|
34
|
+
r = () => 3, // radius accessor, expected to be in pixels
|
|
35
|
+
label = (d, i) => i, // Accessor for the label
|
|
36
|
+
fill = "#333", // label fill color
|
|
37
|
+
stroke = "white", // label stroke color
|
|
38
|
+
threshold = 2000, // Areas over this size would get labels
|
|
39
|
+
width = null,
|
|
40
|
+
height = null,
|
|
41
|
+
target = null, // Where do you want it to draw
|
|
42
|
+
font = "10px sans-serif",
|
|
43
|
+
hover = true, // Show label of the hovered point
|
|
44
|
+
onHover = (i) => i, // callback when hovered, will pass the index of the selected element
|
|
45
|
+
hoverFont = "bolder 12px sans-serif",
|
|
46
|
+
labelsInCentroids = true,
|
|
47
|
+
|
|
48
|
+
backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
|
|
49
|
+
strokeWidth = 5,
|
|
50
|
+
|
|
51
|
+
showVoronoi = false,
|
|
52
|
+
voronoiStroke = "#ccc",
|
|
53
|
+
|
|
54
|
+
showAnchors = false,
|
|
55
|
+
anchorsStroke = "orange",
|
|
56
|
+
anchorsFill = "none",
|
|
57
|
+
|
|
58
|
+
useOcclusion = true,
|
|
59
|
+
occludedStyle = "opacity: 0.2", // css style rules to be used on occluded labels
|
|
60
|
+
|
|
61
|
+
// For debugging
|
|
62
|
+
showPoints = false,
|
|
63
|
+
pointsFill = "#ccc",
|
|
64
|
+
pointsSelectedFill = "firebrick",
|
|
65
|
+
pointsStroke = "#ccc",
|
|
66
|
+
renderer = "svg",
|
|
67
|
+
debug = false,
|
|
68
|
+
selected = null,
|
|
69
|
+
padding = 3, // label padding in pixels
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
## Known problems
|
|
75
|
+
|
|
76
|
+
* Doesn't guarantee non-overlapping
|
|
77
|
+
* If two marks share the same coordinates it will draw their labels and anchors in the same position. It won't be possible to hover over the repeated ones
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## More examples
|
|
81
|
+
|
|
82
|
+
For observable notebooks please see [@john-guerra/smart-labels](https://observablehq.com/@john-guerra/smart-labels#smartLabels)
|
|
83
|
+
|
|
84
|
+
For other vanilla JS examples see the [/examples](/examples) folder
|