Development

Wiki ▸ Development

Environment

Please note that if you wish to build a pure ES5 Javascript (no JSX or ES6) local build from the git repo, you need to first run npm run release and cd to the ./build/cjs directory and link or install the compiled package.

Otherwise, you can run npm run watch and experiment with local changes made to the example charts in the docs/examples directory, which builds to the website served to./build/public.

note: the className features stated below are not complete in current release (v0.2.0)

Chart className

className should be stated explicitly for each svg component (including <rect>, <circle> etc) for maximum flexibility and testability.

####Parent Element Each chart should have a unique className property at the parent element - <svg> tag, prefixed with rd3 following by their small letter module name.

<svg className='rd3-barchart'>
  <g>...</g>
</svg>

Table below shows className for each chart.

module name	className
BarChart	rd3-barchart
LineChart	rd3-linechart
PieChart	rd3-piechart
AreaChart	rd3-areachart
Treemap	rd3-treemap
ScatterChart	rd3-scatterchart

####Child Element Child elements' className under parent element should be prefixed with parent className following by their element tag name.

<svg className='rd3-barchart'>
  <g>
    <g className='rd3-barchart-bars'>
      <rect .../>
      <rect .../>
      ...
    </g>
    ...
  </g>
</svg>

####Axes Currently there are 2 default className for each axis.

• xAxis - x, axis
• yAxis - y, axis

When you include axis in a chart, please add another className for them. It should be prefixed by the parent className followed by -axes. Again, taking barChart as example

<svg className='rd3-barchart'>
  <g>
    <g><rect className=`rd3-barchart-rect .../> <rect ... /> ... </g>
    <!-- x axis -->
    <g className='rd3-barchart-axes axis x'>...</g>
    <!-- y axis -->
    <g className='rd3-barchart-axes axis y'>...</g>
  </g>
</svg>