d3act-pie

#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