Releases: susielu/d3-annotation
Add missing notePadding to Types
Fix missing subject handle
v2.3.1 2.3.1
Allow bgPadding on note
Fixes changing annotation type & connector type bugs
endScale, wrapSplitter, and bug fixes
endScale, changing the size of the dot and the arrow
Adding another connector property called endScale
that is a scaling multiplier for the dot and arrows at the end of connectors, { connector: { end: 'arrow', endScale: .8 } }
In response to this issue: #37
wrapSplitter, pass a custom modifier for wrapping text in notes
note: {
label: " A different\n annotation type with long wrap",
title: "Another title with a long wrap for testing",
wrapSplitter: /\n/
}
Suggested by @mipac in this issue: #41
fix: lineType didn't have default color
Fix for this issue where the horizontal and vertical lines on notes didn't have default styling: #40
v2.0.0
Copy of post from website: http://www.susielu.com/data-viz/d3-annotation-2
Goals
The goal of this upgrade is to make the library easier to use. The main change is custom styling is built in, no longer needing a css file, and you can set a color property to change the color of the entire annotation for easy styling.
Breaking Changes
- No
d3-annotation.css
I have added default styling so that you no longer need to import the css file annotationBadge
, new default setting. Previously if you used the badge annotation it defaulted to x and y settings of "left" and "top" if you didn't provide additional values. This would offset the badge to the top left, now the default centers the badge
Updates
Using nx
and ny
to set the note position.
- Previously you could only set the note position as an offset from the subject using dx, dy. I ran into use cases where it would have been really helpful to be able to set the note position directly in x,y space, not as an offset, you can now use nx, and ny to position the note for this use case
Default styling for annotations.
(image: colors.png class:custom-size width: 400)
- In v1 I provided a css file to go with the module. I recently learned that there is this hierarchy of styling precedence:
- Attribute on svg element, e.g.
<circle fill="blue" ></circle>
- CSS styling - will override attribute styling
circle { fill: blue }
- Inline styling - most specific, will override all
<circle style="fill: blue"></circle>
- Attribute on svg element, e.g.
- This allows me to provide default styling for the annotations that can still be overridden with css. The default style uses
grey
as the annotation color - Another benefit of this is you can now pass annotations a
color
property and it will use that color in all of the default styling
New Badge Annotation Settings
- The annotationBadge used to only have four positions, and defaulted to the top left
- Now it has nine options and defaults to the center badge:
Example of the Emmys 2017 makeover using these new features
Bug fixes and implementing nx, ny
- Fix for IE11 bug after 1.13.0 release #29. Changed the check from using .name to .toString check if it's an object versus a function.
- Fix for [Note label not displayed if it start by whitespace #27](Note label not displayed if it start by whitespace) by filtering out "" values after splitting for word wrap
- Fix for bug end-connector change dynamically #28 by adding in a classID concept. The problem was because the paths for the connector-end all had different class names so trying to us d3 to select them never replaced the end, always added a new end.
- Feature, added concept of nx and ny if you want to set the absolute position of the note instead of the relative position
updateText() functionality, slimmed down d3-annotation build
Add an updateText function into annotations API. Also fixed the rollup settings so that d3-annotation works like all of the other d3 modules and doesn't include the dependency files, ref #20
Note Padding, Responsive event
Rollup modules es6 support
- Enabling next syntax and usage of library, as a result of Wrapping and text size in responsive design #19