javascript - Adapting nvd3 linePlusBarChart to a histogram with cumulative percentage line? -

i looking options build histograms, , before tried in barebones d3, found nvd3's lineplusbarchart desirable, although given example wasn't designed histograms cumulative percentage line.

with community help, managed such chart done in d3. went try adapt , got this far.

it seems reason, 2 charts, mini preview @ bottom larger chart @ top, , line has circular points, big on large chart. how 1 chart, no points on line (or @ least small points), , make match more basic d3 version?

any suggestions?

i'm not sure if using nvd3 (look/feel) requirement you, sounds you're trying replicate d3 histogram example "...make match more basic d3 version?".

if you're fine pure d3 version take @ fiddle make small changes this histogram example.

first, add cumulative property result of d3 histogram function

data.foreach(function(d,i){     if(i === 0){     d.cum = d.y   }else{     d.cum = d.y + data[i-1].cum   } }) 

next create y scale cumulative line

var yc = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.cum; })]) .range([height, 0]); 

then, declare line function make use of our new cum property , yc scale

var line = d3.svg.line() .x(function(d) { return x(d.x); }) .y(function(d) { return yc(d.cum); }); 

and draw cumulative line

svg.append("path")   .datum(data)   .attr("class", "line")   .attr("d", line); 

regarding nvd3 example posted, can set chart's 'focusenable' false rid of bottom chart.

var chart = nv.models.lineplusbarchart()         .margin({top: m.top, right: m.right, bottom: m.bottom, left: m.left})         .x(function(d,i) { return })         .y(function(d,i) {return d[1] })         .focusenable(false)         ; 

the other issues (big dots , shaded region around line) css related. adding nvd3's css file should solve them. see fiddle.

hope helps.