我以“some_date”之外的方式构建“var cities”,“at”从“0”变为“1”。然后我尝试使用此信息绘制超出“some_date”变为虚线的行。可以请有人告诉我代码有什么问题吗?
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");
};
});
});
好吧,我尝试使用“自定义行生成器”但是我得到了一个丑陋的结果。所以我解决了构造两条线的问题。第一个到达“some_date”并且是正常线。第二个是虚线,它从“some_date”开始。请参阅下面的代码。
// 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); });