Knockout.js D3 Line Graph
Making a pretty D3.js graph with a knockout binding.
Complex values
To use data objects with the binding, specify how the binding should access the x/y values:
var data = pos: 0 value: 1 pos: 1 value: 3 pos: 2 value: 4 pos: 4 value: 5 ;
The x accessor is optional, if not specified it will use the index of the element as the x-position.
Axis and formatting
To show the x and y axis on the graph enable it in the binding options:
Axis scale options
The scale used for the axis can be specified using the binding options, any d3 scaling function can be used:
By default the binding will use the linear scale. Note that specifying a different scale than linear implies using a complex data source so be sure to also specify the x & y accessors.
Setting additional axis options
It may be required to set additional options on the axis. This can be done using a callback specified in the binding options. For example setting the format of a time scale axis:
{ axis;}
When the graph is rendered the callback will be invoked and additional options included.
Graph styling
Styling is handled with CSS, see the example for more details.
Examples
Examples are available: https://gustavnikolaj.github.io/knockout-d3-line-graph