How to draw horizontal line in NVD3
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
<div id="chart">
<svg></svg>
</div>
CSS
#chart svg {
height: 400px;
}
JavaScript
function getData(groups, points) {
var data = [],
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
random = d3.random.normal();
for (i = 0; i < groups; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (j = 0; j < points; j++) {
data[i].values.push({
x: random() + 3,
y: Math.floor(Math.random() * 33),
size: Math.random()
//, shape: shapes[j % 6]
});
}
}
return data;
}
//nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.xDomain([0, 3])
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickValues(['2', '4', '8', '16', '32']);
var data = getData(4, 40);
d3.select('#chart svg')
.datum(getData(4, 40))
.transition().duration(500)
.call(chart);
var line = d3.select('#chart svg')
.append('line')
.attr({
x1: 75 + chart.xAxis.scale()(0),
y1: 30 + chart.yAxis.scale()(16),
x2: 75 + chart.xAxis.scale()(3),
y2: 30 + chart.yAxis.scale()(16)
})
.style("stroke", "#000");
nv.utils.windowResize(function(){
chart.update();
line.attr({
x1: 75 + chart.xAxis.scale()(0),
y1: 30 + chart.yAxis.scale()(16),
x2: 75 + chart.xAxis.scale()(3),
y2: 30 + chart.yAxis.scale()(16)
})
});
//return chart;
//});