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 17, 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 child element <g> under their parent <svg> tag. Chart className should be prefixed with rd3 following by their small letter module name.

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

Table below shows className for each module.

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>
  <g className='rd3-barchart'>
    <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>
  <g className='rd3-barchart'>
    <g><rect className=`rd3-barchart-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