d3.js - nvd3 - how to draw a line over a scatterPlusLineChart, with specific cordinates -
d3.js - nvd3 - how to draw a line over a scatterPlusLineChart, with specific cordinates -
i have plotted scatter bubble chart using model 'scatterpluslinechart', , working fine. need draw line specific points. please help if knows.
var chart; nv.addgraph(function() { chart = nv.models.scatterpluslinechart() .showdistx(true) .showdisty(true) .transitionduration(300) .color(d3.scale.category10().range()); chart.xaxis.tickformat(d3.format('.02f')) chart.yaxis.tickformat(d3.format('.02f')) var graphdata = [{key : 'group1', values : [{x:1, y:5, shape : 'circle'}, {x:4, y:2, shape : 'circle'}] }, {key : 'group2', values : [{x:4, y:3, shape : 'circle'}, {x:1, y:6, shape : 'circle'}] } ] d3.select('#test1 svg') .datum(nv.log(graphdata)) .call(chart); nv.utils.windowresize(chart.update); chart.dispatch.on('statechange', function(e) { nv.log('new state:', json.stringify(e)); }); homecoming chart; });
above existing code , next requirement
draw 2 lines
1) through (1,5) (4,3)
2) through (4,2) (1,6)
use slope
, intercept
groups arguments specify lines parameters.
for illustration :
var graphdata = [{ key: 'group1', values: [{ x: 1, y: 5 }, { x: 4, y: 2 }], intercept: 6, slope: -1 }, { key : 'group2', values : [{ x: 4, y: 3 }, { x: 1, y: 6 }], intercept: 7, slope: -1 }]
i allow utilize appropriate maths calculate slope , intercept of trend lines.
d3.js nvd3.js
Comments
Post a Comment