Skip to content
This repository has been archived by the owner on May 18, 2019. It is now read-only.

Development

Lim Yang Wei edited this page Feb 22, 2015 · 5 revisions

WikiDevelopment

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 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>
      <rect className=`rd3-barchart-rect .../>
      <rect className=`rd3-barchart-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>
Clone this wiki locally