javascript - d3 js graph not displaying line -
the below d3 graph runs fine... except can't see resulting line on graph. can inspect element in chrome , of values of line there no line visible.
i'm pretty sure it's css issue can't figure out.
the code based on this: focus+context via brushing
any appreciated!
var data = [ { day : 'sunday', time : '0.00', bluetooth : '3', date : '03\/06\/2015', epoch : '1440808200' }, { day : 'sunday', time : '0.25', bluetooth : '3', date : '03\/06\/2015', epoch : '1440809100' }, { day : 'sunday', time : '0.50', bluetooth : 3, date : '03\/06\/2015', epoch : '1440810000' }, { day : 'sunday', time : '0.75', bluetooth : '3', date : '03\/06\/2015', epoch : '1440810900' }, { day : 'sunday', time : '1.00', bluetooth : '3', date : '03\/06\/2015', epoch : '1440811800' }, { day : 'sunday', time : '1.25', bluetooth : '3', date : '03\/06\/2015', epoch: 1440812700 }, { day : 'sunday', time : '1.50', bluetooth : '3', date : '03\/06\/2015', epoch : '1440813600' }]; // set dimensions of canvas / graph var margin = {top: 10, right: 10, bottom: 100, left: 40}, //main margins margin2 = {top: 430, right: 10, bottom: 20, left: 40}, // lower margins width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, //main height height2 = 500 - margin2.top - margin2.bottom; //lower height // parse date / time var parsetime = d3.time.format("%h.%m").parse; var parsedate = d3.time.format("%d/%m/%y").parse; var x = d3.time.scale().range([0, width]), //x scale main part x2 = d3.time.scale().range([0, width]), //x scale lower part y = d3.scale.linear().range([height, 0]), //y scale main part y2 = d3.scale.linear().range([height2, 0]); // y scale lower part // define axes var xaxis = d3.svg.axis().scale(x).orient("bottom"), //x axis main xaxis2 = d3.svg.axis().scale(x2).orient("bottom"), //x axis lower yaxis = d3.svg.axis().scale(y).orient("left"); //y axis both var brush = d3.svg.brush() .x(x2) //brush lower x scale .on("brush", brushed); var valueline = d3.svg.line() //.interpolate( "step-before" ) .x(function (d) { return x(d.epoch);}).y(function (d) {return y(d.bluetooth);}); var valueline2 = d3.svg.line() //.interpolate( "step-before" ) .x(function (d) { return x(d.epoch);}).y(function (d) {return y(d.bluetooth);}); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); svg.append("defs").append("clippath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height); var focus = svg.append("g") .attr("class", "focus") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var context = svg.append("g") .attr("class", "context") .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); data.foreach(function (d) { d.date = parsedate(d.date); d.time = +d.time; d.bluetooth = +d.bluetooth; d.epoch = +d.epoch; }); // scale range of data x.domain(d3.extent(data.map(function(d) { return d.date; }))); y.domain([0, d3.max(data.map(function(d) { return d.bluetooth; }))]); x2.domain(x.domain()); y2.domain(y.domain()); focus.append("path") .datum(data) .attr("class", "line") .attr("d", valueline(data)); console.log(valueline(data)); focus.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); focus.append("g") .attr("class", "y axis") .call(yaxis); context.append("path") .datum(data) .attr("class", "line") .attr("d", valueline2(data)); console.log(valueline2(data)); context.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height2 + ")") .call(xaxis2); context.append("g") .attr("class", "x brush") .call(brush) .selectall("rect") .attr("y", -6) .attr("height", height2 + 7); function brushed() { x.domain(brush.empty() ? x2.domain() : brush.extent()); focus.select(".line").attr("d", valueline); console.log(valueline); focus.select(".x.axis").call(xaxis); } body { font: 12px arial; } .line { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispedges; } .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispedges; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
well, after doing little r&d, found reason what's wrong. there few things need understand. draw x axis in both places we've set
x.domain(d3.extent(data.map(function(d) { return d.date; }))); so x domain set date, come draw line using
var valueline = d3.svg.line() //.interpolate( "step-before" ) .x(function (d) { return x(d.epoch);}).y(function (d) {return y(d.bluetooth);}); var valueline2 = d3.svg.line() //.interpolate( "step-before" ) .x(function (d) { return x(d.epoch);}).y(function (d) {return y(d.bluetooth);}); in above code using d.epoch, here passing d.epoch value x scale function x(d.epoch) make no sense. x() expecting dates take. have pass proper values scales , set domain values properly.
the other thing our data x axis values(d.date) same(single value) july 3rd,2015 here want draw line @ single point how drawn. , y axis values(d.bluetooth) same(single value) 3.
from these values expecting line drawn data points pointed (3rd july,2015, 3) (3rd july,2015, 3) repeated 7 times.
to see line pass proper values line generating function's x value, , increase date values not on single day.
hope understood.if not ask more. working fiddle data modification , correction
Comments
Post a Comment