d3-bullet's Introduction

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(data)

For example:

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

Recommend Projects