CODEWITHSUNDEEP
javascriptcssd3.js
Oddball
Oddball

Reputation: 23

d3 js graph not displaying line

The below d3 graph runs fine... Except I can't see the resulting line on my graph. I can inspect the element in Chrome and all of the values of the line are there but no line is visible.

I'm pretty sure it's a CSS issue but I can't figure it out.

The code is based on this: Focus+Context via Brushing

Any help would be much 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 the dimensions of the 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 the 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 for main part
    x2 = d3.time.scale().range([0, width]),							//x scale for lower part
    y = d3.scale.linear().range([height, 0]),						//y scale for main part
    y2 = d3.scale.linear().range([height2, 0]);						// y scale for lower part

// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom"),				//x axis for main
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),				//x axis for lower
    yAxis = d3.svg.axis().scale(y).orient("left");					//y axis for both

var brush = d3.svg.brush()
    .x(x2)															//brush is for 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 the range of the 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>

Upvotes: 0

Views: 1424

Answers (1)

saikiran.vsk
saikiran.vsk

Reputation: 1796

Well, After doing little R&D, I found the reason what's wrong. There are few things we need to understand. To draw x axis in both places we've set

x.domain(d3.extent(data.map(function(d) { return d.Date; })));

so x domain is set with date, but where as come to draw line we are 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 the above code we are using d.Epoch, here we are passing d.Epoch value to x scale function like this x(d.Epoch) this will make no sense. x() is expecting dates to take. We have to pass proper values to scales and set domain values properly.

The other thing is our data All x axis values(d.Date) are same(single value) that is July 3rd,2015 so here we want to draw the line at single point how it could be drawn. And also Y axis values(d.Bluetooth) are same(single value) that is 3.

From these values we are expecting line to be drawn All data points will be pointed to (3rd July,2015, 3) to (3rd July,2015, 3) This is repeated 7 times.

To see the line pass the proper values to line generating function's x value, and increase the date values not on a single day.

Hope you understood.If not ask for more. working fiddle with data Modification and Correction

Upvotes: 1

Related Questions