Hide some parts of a <path> generated with a curve interpolation - d3.js

Question

All:
I am trying to make a customized line generator like D3 line(), but with ability to customize line segments style when there is data missing(like using dash line)
one thing I did not know how to implement is its .interpolate() function. The math seems complicated, what I am trying to do is just use existing D3 line function to draw those continus segments and connect them with dash line, but I can not figure out how to generate interpolated line?
In the code example below, u can see the dash line is not exactly overlap the solid line:
var data = [];
for(var i=0; i<20; i++){
if( i>0 && (i%4==0) ){
data.push(null);
}else {
data.push({x:i, y:Math.random(i)})
}
}
var x = d3.scale.linear();
var y = d3.scale.linear();
x.domain([0, 19])
.range([10, 390])
y.domain([0, 1])
.range([10, 360]);
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400);
var lg = svg.append("g")
.classed("lineGroup", true);
var xg = svg.append("g")
.classed("xaxis", true)
.attr("transform", function(){
return "translate(0, 380)";
});
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
line.defined(function(d) { return d!=null; });
lg.append("path")
.classed("shadowline", true)
.attr("d", function(){
return line(data.filter(function(d){return d!=null;}));
})
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "3px")
.attr("stroke-dasharray", "5,5");
lg.append("path")
.attr("d", function(){
return line(data);
})
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "3px");
lg.selectAll("circle")
.data(data.filter(function(d){return d!=null;}))
.enter()
.append("circle")
.style("fill", "orange")
.style("stroke", "red")
.style("stroke-width", "3px")
.attr("r",5)
.attr("cx", function(d){return x(d.x);})
.attr("cy", function(d){return y(d.y);})
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
xg.call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Any help? Thanks

Answer 1

I've come up with a weird algorithm to hide some parts of your line, first of all you have to realize that the interpolation algorithm you chose works by analyzing the previous and next points of any t between the previous and next point, therefore even if you want to generate only segment of the path you have to use the same interpolation algorithm otherwise the first/last points won't have the required curve
With that in mind my algorithm to solve your problem is as follows
render the solid path
render some segments of this solid path but with a white stroke so that it works like a mask
render the dashed path
Implementation
first render the solid path with the desired interpolation
in the data find the extremes of all the gaps e.g. gaps([0, 1, null, 3, 4, null, 5]) is transformed to [[1, 3], [4, 5]]
compute the length of the path at those points, this involves an exhaustive brute force check since there's no api to get the length from the origin of a path to a determined point that lies on it, since your data is increasing on x I did binary search but for the general case as I've said you need to do a brute force check
make a lot of samples between the gap endpoints (seen as path lengths) with path. getPointAtLength and finally render a path for each collection of points, the trick is to set a white stroke
render the dashed path
NOTE: I changed the interpolation function to 'cardinal' so that curves are a lot more noticed and you can see the masks in action
var data = [];
for(var i=0; i<20; i++){
if( i>0 && (i%4==0) ){
data.push(null);
}else {
data.push({x:i, y:Math.random(i)})
}
}
var x = d3.scale.linear();
var y = d3.scale.linear();
x.domain([0, 19])
.range([10, 390])
y.domain([0, 1])
.range([10, 360]);
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400);
var lg = svg.append("g")
.classed("lineGroup", true);
var xg = svg.append("g")
.classed("xaxis", true)
.attr("transform", function(){
return "translate(0, 380)";
});
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
function lineFiltered(data) {
return line(data.filter(function (d) { return !!d }))
}
var basePath = lg.append("path")
.attr("d", function () { return lineFiltered(data) })
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "3px");
function getPathLengthAtPoint(path, point, samples) {
// binary search to find the length of a path closest to point
samples = samples || 100
var lo = 0, hi = path.getTotalLength()
var res = 0
for (var i = 0; i < samples; i += 1) {
var mid = lo + (hi - lo) / 2
var pMid = path.getPointAtLength(mid)
if (pMid.x < x(point.x)) {
res = lo = mid
} else {
hi = mid
}
}
return res
}
// gets endpoints from where there's a gap
// it assumes that a gap has only length 1
function getGapsEndPoints(data) {
var j = 0
var gaps = []
for (var i = 0; i < data.length; i += 1) {
if (typeof data[i] !== 'number') {
gaps.push([data[i - 1], data[i + 1]])
}
}
return gaps
}
// generates multiple points per path
function generatePaths(data, path, samples) {
samples = samples || 50
return data.map(function (d) {
var lo = d[0], hi = d[1]
var points = []
for (var i = 0; i <= samples; i += 1) {
var point = path.getPointAtLength(lo + i/samples * (hi - lo))
points.push({
x: x.invert(point.x),
y: y.invert(point.y)
})
}
return points
})
}
var missingData = data.map(function (d) {
return d && getPathLengthAtPoint(basePath.node(), d)
})
missingData = getGapsEndPoints(missingData)
missingData = generatePaths(missingData, basePath.node())
// finally create the mask paths using the same line generator
lg.selectAll('path.mask').data(missingData)
.enter().append('path').classed('mask', true)
.attr('d', lineFiltered)
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", "3px")
lg.append("path")
.classed("shadowline", true)
.attr("d", function () { return lineFiltered(data) })
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "3px")
.attr("stroke-dasharray", "5,5");
lg.selectAll("circle")
.data(data.filter(function(d){return d!=null;}))
.enter()
.append("circle")
.style("fill", "orange")
.style("stroke", "red")
.style("stroke-width", "3px")
.attr("r",5)
.attr("cx", function(d){return x(d.x);})
.attr("cy", function(d){return y(d.y);})
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
xg.call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

Here is my attempt:
Imagine you have an array like this:
[1,2,3, null, 4,5, null,null, 8,9]
Break it into two array groups
datachunks = [[1,2,3],[4,5][8,9]
brokenDataChunks = [[3,4][5,8]]
Now draw the datachunks like this:
datachunks.forEach(function(dc){
lg.append("path")
.attr("d", function(){
return line(dc);
})
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "3px")
})
Now draw the brokenDataChunks like this:
brokendatachunks.forEach(function(dc){
lg.append("path")
.classed("shadowline", true)
.attr("d", function(){
return line(dc);
})
.style("fill", "none")
.style("stroke", "red")
.style("stroke-width", "3px")
.attr("stroke-dasharray", "5,5");
})
The main challenge was to get the array split into this fashion:
var datachunks = [];//hold data chunks for the blue line connected one
var brokendatachunks = [];//hold data chunks for the red dashed line disconnected ones
var tempconnected =[];
var tempbroken =[];
data.forEach(function(d, i){
if(d){//if not null
tempconnected.push(d); //push in tempconnected
if (tempbroken.length > 0){
tempbroken.push(d);//if broken was detected before
brokendatachunks.push(tempbroken);//add this array into brokendatachunks.
tempbroken = [];//set the new value in temp broken to get new set of values
}
} else {
if(data[i-1])
tempbroken.push(data[i-1]);//push previous value don't want to insert null here.
datachunks.push(tempconnected);
tempconnected = [];
}
});
if (tempconnected.length > 0){
datachunks.push(tempconnected);
}
if (tempbroken.length > 0)
brokendatachunks.push(tempbroken);
}
working code here
complex case with lot of broken points in between here
In complex case I have put point generation like this
for(var i=0; i<20; i++){
if( i>0 && (i%4==0 || i%3 ==0) ){
data.push(null);
}else {
data.push({x:i, y:Math.random(i)})
}
}