d3js - how to prevent the `line` from `null` values in json data? - json

Question

I am getting the json data from back-end to draw the line. the problem what i am getting is, even if the data is being as null ( out of 20 say 5 doesn't have data ) i am getting line drawn in.
what i expect is, I don't want to draw the lines once the data has the values as null.
example data :
[
{
"ActualPercentage": 48.78,
"PlanPercentage": 44.05,
"Week": "2015-10-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 45.25,
"Week": "2015-11-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 46.45,
"Week": "2015-12-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 47.65,
"Week": "2016-01-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 48.85,
"Week": "2016-02-28T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 50.05,
"Week": "2016-03-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 51.25,
"Week": "2016-04-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 100,
"Week": "2016-05-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 100,
"Week": "2016-06-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 100,
"Week": "2016-07-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": 100, //let this line alone stop here.
"Week": "2016-08-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null, //still drawing!?
"Week": "2016-09-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2016-10-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2016-11-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2016-12-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2017-01-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2017-02-27T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2017-03-30T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2017-04-29T18:30:00.000Z"
},
{
"ActualPercentage": 100,
"PlanPercentage": null,
"Week": "2017-05-30T18:30:00.000Z"
}
]
I am drawing 2 lines here. let first line draw as fill data and second one let stop up to it's find the value.
how to do this?
here is my code :
var that = this;
var parseDate = d3.time.format("%Y%m%d").parse;
var width = this.width;
var height = this.height;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var toolTipScale = d3.scale.linear().domain([height + 90, 80]).range([0, 100]);
var iScale = d3.scale.linear().domain([width + 80, 80]).range([this.datas.length, 0]);
var color = d3.scale.ordinal()
.domain(["ActualPercentage", "PlanPercentage", "WeeklyActual", "WeeklyPlan"])
.range(["#FF0000", "#009933" , "#FFFFFF", "#ff0099"]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.ticks(d3.time.month, 1)
.tickFormat(d3.time.format("%Y-%b"))
.tickSubdivide(true)
.orient("bottom")
.outerTickSize(0); //removing right border as the way top too.
var yAxis = d3.svg.axis().scale(y).tickSize( -width ).tickSubdivide(true).orient("left").outerTickSize(0);
var line = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.defined(function(d) { return d.y; })
.y(function(d) { return y(d.temperature); });
var svg = this.svg;
var div = d3.select("body").append("div")
.attr("class", "tooltips")
.style("opacity", 0);
color.domain(d3.keys(this.datas[0]).filter(function(key) {
return key !== "Week" && key !== "Value" && key !== 'WeeklyActual' && key !== 'WeeklyPlan'
}));
this.datas.forEach(function(d) {
var dateObj = new Date(d.Week);
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
d.Week = new Date(month+'/'+day+'/'+year );
// console.log( d.Week );
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: that.datas.map(function(d) {
return {date: d.Week, temperature: (+d[name]) };
})
};
});
x.domain(d3.extent(this.datas,
function(d) {
return d.Week;
})
);
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr('class', 'text-xaxis')
.style("text-anchor", "end")
// .attr('dx', -40)
// .attr('dy', 60)
.attr("transform", function(d) {
return "rotate(-65)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.attr('class', 'text-yaxis')
.attr('dx', -10)
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr('id', function(d) {
return d.name;
})
.attr("class", "city");
var path = city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) { return color(d.name); });
var totalLength = [
path[0][0].getTotalLength(),
path[0][1].getTotalLength()
];
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
var circles = city.selectAll("circle")
.data(function(d) {
return d.values
})
.enter()
.append("circle")
.attr("r", 3.5)
.attr("cx", function(d, i) {
return x(d.date)
})
.attr("cy", function(d) {
return y(d.temperature)
})
.style('cursor', 'pointer')
.attr("fill", "transparent")
.attr("stroke", "yellow")
.attr("stroke-width", 0);
circles.transition().duration(3000).attr("stroke-width", 2);
circles.on("mouseover", function(d, i) {
div.transition().duration(200).style("opacity", 0.9);
var data = d3.select(this.parentNode).select("path").data()[0];
var date = d.date;
var dateValues = date.getDate() +'/' + (date.getMonth() + 1) +'/' + date.getFullYear();
div.html( "<span>"+ data.name + ": </span><span>" + dateValues + '</span><span>' + d.temperature +'</span>')
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 60) + "px");
})
.on("mouseout", function(d, i) {
div.transition().duration(500).style("opacity", 0);
})

Answer 1

from the idea of softwarenewbie7331 I have modified the code like this: ( Y values )
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.defined(function(d) { return d.temperature })
.y(function(d) { return y(d.temperature); });
this is working fine for me.