javascript - D3 bar chart with variable width and variable length data up to 1000 data points -
i having lot of trouble d3 bar chart length of data search variable. used d3 bar chart example , built this. data length goes up, graph gets less , less legible. problem seems range gets confused when beyond 100 points or so.
code below:
function makegraph(data,ctype) { //var data=xdata.splice(-900) var gwidth=data.length*2; if(gwidth < 800) gwidth=800; //gwidth=800 var margin = {top: 9, right: 20, bottom: 30, left: 90}, width = gwidth - margin.left - margin.right, height = 300 - margin.top - margin.bottom; x = d3.scale.ordinal() .rangeroundbands([0, width], .1); //x=d3.scale.linear().domain([0,1]).range(0,width) var y = d3.scale.linear() .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom") .tickformat(function(d) { if (d % 10) return ""; else return d;}) var yaxis = d3.svg.axis() .scale(y) .orient("left"); // .ticks(10, "%"); d3.select("svg").remove() var svg = d3.select("#graphchart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var line = d3.svg.line() .x(function(d) { return x(d.rowid); }) .y(function(d) { return y(d[ctype]); }); x.domain(data.map(function(d) { return d.rowid; })); var ymax=d3.max(data, function(d) { return d[ctype]; }); var ymin=d3.min(data, function(d) { return d[ctype]; }); y.domain([ymin, ymax]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", math.log10(ymax)) .attr("dy", ".71em") .style("text-anchor", "end") .text("bytes"); // console.log(x.rangeband()) var bar = svg.selectall(".bar") .data(data); bar.enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.rowid); }) .attr("width", x.rangeband()) .attr("y", function(d) { return y(d[ctype]); }) .attr("height", function(d) { var xya= height - y(d[ctype]); /* console.log(xya+":"+d[ctype]); */ return height - y(d[ctype]); }) /* .attr("title", function(d) { return d['bytes']+" bytes @ "+d.stime; }) */ .on("mouseover", function(d) { $("#graphinfo").html(d3.format('0,000')(d['bytes'])+" bytes @ "+d.stime) }) .on("mouseout",function(d) { $("#graphinfo").html(' ')}) .on("click",function(d) { tablegraph(d)}); $('.bar').tooltip() }
do have suggestions how can make graph bar chart grow horizontally larger data sets? , suggestions!
vijay
Comments
Post a Comment