使用D3js制作超出某些点的线条变为虚线

时间:2014-01-04 11:49:32

标签: d3.js

我以“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); });

0 个答案:

没有答案