d3.js - Error: Invalid value for <g> attribute transform="translate(0,NaN)" -
problem chart on d3. getting above error message working fine dummy data, when use our end data several errors. able fix of it. current code. here codepen.actual data just alot less views getting broken along way. if date/value 0;
function viewsprogresschart() { var viewswidgetwidth = $('.viewswidget .thumbnail').width(); var viewswidgetheight = $('.calendarwidget .thumbnail').height() - 90; var fontsize = (math.min(width, height) / 4); var margin = { top: 2, right: 15, bottom: 15, left: 18 }, width = viewswidgetwidth - margin.left - margin.right, height = viewswidgetheight - margin.top - margin.bottom, dateline = height - 20; var data = phpweeklyview.map(function(elem, index) { return { date: new date(elem.date), close: elem.view_count }; }); var formatpercent = d3.format("+%"), formatchange = function(x) { return formatpercent(x - 1); }, // parsedate = d3.time.format('%y-%m-%d').parse; parsedate = d3.time.format('%d-%b-%y'); var x = d3.time.scale() .range([0, width]); var y = d3.scale.log() .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left") .ticksize(-width, 0) .tickformat(formatchange); var line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.ratio); }); var svg = d3.select(".viewswidget div.row").append("svg") .attr("width", "100%") .attr('preserveaspectratio', 'xminymin') .attr("height", height + 22) .attr('preserveaspectratio', 'xminymin') .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var gx = svg.append("g") .attr("class", "axis axis--x") .attr('viewbox', '0 0 ' + math.min(width, height) + ' ' + math.min(width, height)) .attr('preserveaspectratio', 'xminymin') .attr("transform", "translate(0," + dateline + ")"); var gy = svg.append("g") .attr("class", "axis axis--y"); gy.append("text") .attr("class", "axis-title") .attr('viewbox', '0 0 ' + math.min(width, height) + ' ' + math.min(width, height)) .attr('preserveaspectratio', 'xminymin') .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .text("change in views"); // compute views relative base value. var basevalue = +data[0].close; data.foreach(function(d) { // if(d.close != 0){ // basevalue = +d.close; // } d.date = parsedate(d.date); d.ratio = d.close / basevalue; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.ratio; })); // use second linear scale ticks. yaxis.tickvalues(d3.scale.linear() .domain(y.domain()) .ticks(30)); gx.call(xaxis); gy.call(yaxis) .selectall(".tick") .classed("tick--one", function(d) { return math.abs(d - 1) < 1e-6; }); svg.append("path") //had .datum(data) here giving error before dummy data worked fine. .data(data) .attr("class", "line") .attr("d", line); }
Comments
Post a Comment