Making a pretty D3.js graph with a knockout binding.
<div data-bind="d3LineGraph: observableArray"></div>
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 }
];
<div data-bind="d3LineGraph: {
value: observableArray,
y: function(d) { return d.value; },
x: function(d, index) { return d.pos; }
}">
</div>
The x accessor is optional, if not specified it will use the index of the element as the x-position.
To show the x and y axis on the graph enable it in the binding options:
<div data-bind="d3LineGraph: { value: observableArray, showAxes: true }"></div>
The scale used for the axis can be specified using the binding options, any d3 scaling function can be used:
<div data-bind="d3LineGraph: {
value: observableArray,
yScale: d3.time.scale,
xScale: d3.scale.linear
}">
</div>
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.
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:
function xAxisFormatCallback(axis) {
axis.tickFormat(d3.time.format("%d %H:%M"));
}
<div data-bind="d3LineGraph: {
value: observableArray,
xScale: d3.time.scale,
xAxisOptions: xAxisFormatCallback
}">
</div>
When the graph is rendered the callback will be invoked and additional options included.
Styling is handled with CSS, see the example for more details.
Examples are available: https://gustavnikolaj.github.io/knockout-d3-line-graph