Using D3js to make a line that beyond some point turns dashed - d3.js

Question

I construct the "var cities" in such a way that beyond "some_date" the "at" turns from "0" to "1". Then I try to use this information to draw a line that beyond "some_date" turns dashed. Could please someone tell me what is wrong with the code?
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
if(d.date < some_date){
return {date: d.date, temperature: +d[name], vis:"0", at:"0"};
}else{
return {date: d.date, temperature: +d[name], vis:"0", at:"1"};
};
})
};
});
city.append("path")
.attr("class", "line")
.attr("d", function(d) {if(d.name.match(/pib_1t/)){
d.vis = "1";
return line(d.values);
}})
.style("stroke", function(d) { return color(d.name); })
.style("stroke-dasharray", function(d){
console.log(d.name);
d.values.forEach(function(e, i) {
if(e.at == "1"){
return ("2,2");
}else{
return ("2,0");
};
});
});
Well, I tried to use a "custom line generator" but I got an ugly result. So I solved the problem constructing two lines. The first one goes until "some_date" is reached and is a normal line. The second is a dashed line and it starts at "some_date". See the code bellow.
// first line
city.append("path")
.attr("class", "line")
.attr("d", function(d) {if(d.name.match(/pib_1t/)){
d.vis = "1";
return line(d.values.slice(0,[bisect(data,some_date)]));
}})
.style("stroke", function(d) { return color(d.name); });
// second line
city.append("path")
.attr("class", "line")
.style("stroke-dasharray", ("2, 2"))
.attr("d", function(d) {if(d.name.match(/pib_1t/)){
d.vis = "1";
return line(d.values.slice([bisect(data, some_date)-1],data.length));
}})
.style("stroke", function(d) { return color(d.name); });