https://github.com/gordonsmith/d3-bullet
V4 Version of d3-bullet plugin
https://github.com/gordonsmith/d3-bullet
Last synced: over 1 year ago
JSON representation
V4 Version of d3-bullet plugin
- Host: GitHub
- URL: https://github.com/gordonsmith/d3-bullet
- Owner: GordonSmith
- License: bsd-3-clause
- Created: 2017-05-30T08:24:36.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:34:56.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T02:22:10.637Z (about 2 years ago)
- Language: JavaScript
- Size: 240 KB
- Stars: 4
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-bullet v4
d3 v4 port of https://github.com/d3/d3-plugins/tree/master/bullet
## Installing
`npm install d3v4-bullet`.
## API Reference
# d3.bullet()
Constructs a new default [bullet generator](#_bullet).
# bullet(data)
For example:
```js
var chart = d3.bullet()
.width(width)
.height(height);
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
var data = [
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
]
```
# bullet.width([width])
If *width* is specified, sets the *width* and returns this bullet generator. If *width* is not specified, returns the current *width*, which defaults to: ```300```
# bullet.height([height])
If *width* is specified, sets the *width* and returns this bullet generator. If *width* is not specified, returns the current *width*, which defaults to: ```30```