d3act-pie

1.1.0 • Public • Published

#d3act-pie Pie charts using React and d3

d3act-pie is a React component that uses d3's chart-generating capabilities entirely in React's virtual DOM.

PieChart

  • width: Number. Width in px. Default 420px.
  • height: Number. Height in px. Default 320px.
  • scaleFactor: Number. Scale multiplier on selected pie wedge. Default 1.1.
  • data: [Row]. Array of values for chart.
    • id: String | Number. Unique ID for matching against selected value.
    • label: String. Label for pie wedge.
    • rawValue: Number. Value for computing pie wedge angle.
    • value: String. Formatted rawValue for display.
    • style: Object. Additional styles to apply to pie wedge.
    • className: String. Additional classes to apply to pie wedge.
  • selected: String | Number. Matches against ID for highlighting a wedge.
  • onMouseOver : (Row? -> ()). Event handler for mousing over a pie wedge. Called with Row when mousing over, null when mousing out.
  • onClick : (Row -> ()). Event handler for clicking pie wedge.

These elements are called by PieChart, but can be accessed directly as well.

PieWedge

  • data: Object. Data for pie wedge, as returned by d3.layout.pie(), to use with d3.svg.arc().
    • data: Row
    • startAngle: Number
    • endAngle: Number
    • value: Number
  • radius: Number. Radius of pie in px.
  • isSelected: Boolean
  • onMouseOver: (Row? -> ())
  • onClick: (Row -> ())

PieLabel

  • data: Object. Same as PieWedge.
  • radius: Number.
  • radiusBuffer: Number. Padding in px from radius for positioning formatted values.
  • isSelected: Boolean
  • scaleFactor: Number

Readme

Keywords

none

Package Sidebar

Install

npm i d3act-pie

Weekly Downloads

1

Version

1.1.0

License

MIT

Last publish

Collaborators

  • modernserf