Question

我正在制作带有上下文的折线图，以便您可以放大特定日期。

I got some issues with my coloring and my width however.

在我第一次绘制图表时，线条都是相同的颜色。我认为这与我如何将ID提供给某些部分的内容有关。（我已尝试通过ID和javascript提供CSS样式的颜色）

dataGroup.forEach(function(d, i) {
var key = d.key;
channel.append('svg:path')
.attr("d", line(d.values))
.attr("class",function(d){
          if(check)return "lijn2";else return "lijn"})
.attr("mouseZoomable",function(d){
          if(check)return false;else return true})
.attr('id',function(d){return d.key.replace(/\W+/g, "").replace(/ /g,"").toLowerCase();})
.attr('stroke-width', 1.5)
.attr('stroke', function(d, j) 
{
  var colorI=0;

  for(var r = 0;r<colorArray.length;r++)
  {
    if(colorArray[r].State.toString().replace(/\W+/g, "").replace(/ /g,"").toLowerCase() ==d. key.replace(/\W+/g, "").replace(/ /g,"").toLowerCase())
    {
      return localColorScale[colorArray[r].color];
    }
  }
}
)
}

Datagroup是一个带有10个可用通道来分配信息的数据组，它们都有一个独立的数组作为值。此数组包含在特定日期使用此频道的所有计数。

Object
key: "Google+"
values: Array (8)
0 {state: "Google+", date: 1456786800000, count: "543"}
1 {state: "Google+", date: 1456873200000, count: "360"}
2 {state: "Google+", date: 1456959600000, count: "162"}
3 {state: "Google+", date: 1457046000000, count: "483"}
4 {state: "Google+", date: 1457132400000, count: "590"}    
5 {state: "Google+", date: 1457218800000, count: "645"}
6 {state: "Google+", date: 1457305200000, count: "129"}
7 {state: "Google+", date: 1457391600000, count: "188"}

Selecting a certain area fixes colors但完全不同于图表的宽度。对某些图表的关注使用相同的轴，所以我不知道为什么宽度变得怪异。

我的编码技巧远非完美。因此，非常感谢任何有关改进或解决此问题的帮助。如果您需要更多信息（或者如果有什么不清楚的话），请询问！提前谢谢你。

D3折线图颜色和宽度问题

0 个答案: