Javascript D3v4：按scaleOrdinal索引和选择颜色集

我有一个在svg画布上绘制线条图的代码，但我正在努力更改使用d3.scaleOrdinal函数定义的颜色

我定义了12种不同的颜色，但我得到的结果是。 有人能帮我吗？谢谢

  var color2 = d3.scaleOrdinal().range([
      '#673ab7',
      '#9c27b0',
      '#e91e63',
      '#f44336',
      '#ff5722',
      '#ff9800',
      '#ffc107',
      '#ffeb3b',
      '#cddc39',
      '#8bc34a',
      '#4caf50',
      '#009688'])
    .domain(d3.range(1,13));

  var line = d3.line()
    .x(function(d) { return x(d.day); })
    .y(function(d) { return y(d.temp); });

  var lineChart = function(csvfile, i) {
    d3.csv(csvfile, function(error, data){
      data.forEach(function(d){
        d.month = +d.month,
        d.day= +d.day,
        d.temp= +d.temp;
      });

      svg.append('path')
        .data([data])
        .attr('class','line')
        .style('stroke', function(i){ return color2(i);})
        .attr('d', line);

    }); //end of read csv
  }; //end of line chart

  lineChart('/static/data/temp1.csv'1);
  lineChart('/static/data/temp2.csv'2);
  lineChart('/static/data/temp3.csv'3);
  lineChart('/static/data/temp4.csv'4);
  lineChart('/static/data/temp5.csv',5);
  lineChart('/static/data/temp6.csv',5);
  lineChart('/static/data/temp7.csv',6);
  lineChart('/static/data/temp8.csv',7);
  lineChart('/static/data/temp9.csv',8);
  lineChart('/static/data/temp10.csv',80);
  lineChart('/static/data/temp11.csv',90);
  lineChart('/static/data/temp12.csv',100);

---

第一个问题：在D3中，第一个参数始终是数据，无论您将其命名为

d

、

i

或

p

。那么这个,

.style('stroke', function(i){ return color2(i);})

应该是这样的：

.style('stroke', function(d, i){ return color2(i);})

但由于第二个问题，这一改变不会奏效

第二个问题：您正在为每一行调用

lineChart

，每次调用它时，索引都将为0

一种可能的解决方案是将索引作为参数传递：

lineChart('/static/data/temp1.csv', 1);
lineChart('/static/data/temp2.csv', 2);
lineChart('/static/data/temp3.csv', 3);
//...

在函数中（我猜是这样，因为您没有粘贴函数声明）：

查看此演示：

var svg=d3.select（“body”）.append（“svg”）.attr（“width”，500）.attr（“height”，200）；
var color2=d3.scaleOrdinal（）.range（['#673ab7'、'#9c27b0'、'#e91e63'、'#f44336'、'#ff5722'、'#ff9800'、'#ffc107'、'#ffeb3b'、'cddc39'、'8bc34a'、'4caf50'、'009688'））
.domain（d3.范围（1,13））；
功能图（尺寸、索引）{
svg.append（“rect”）.attr（“x”，Math.random（）*470）
.attr（“y”，Math.random（）*170）.attr（“宽度”，尺寸）.attr（“高度”，尺寸）
.attr（“fill”，函数（d，i）{console.log（“索引为”+i）；返回color2（索引）}）；
}
抽签（30，1）；抽签（10,2）；抽签（25,3）；抽签（20,4）；抽签（5,5）；
抽签（10,6）；抽签（8,7）；抽签（12,8）；抽签（10,9）；抽签（17,10）
第一个问题：在D3中，第一个参数始终是数据，无论您将其命名为
d
、
i
或
p
。那么这个,

.style('stroke', function(i){ return color2(i);})

应该是这样的：

.style('stroke', function(d, i){ return color2(i);})

但由于第二个问题，这一改变不会奏效

第二个问题：您正在为每一行调用
lineChart
，每次调用它时，索引都将为0

一种可能的解决方案是将索引作为参数传递：

lineChart('/static/data/temp1.csv', 1);
lineChart('/static/data/temp2.csv', 2);
lineChart('/static/data/temp3.csv', 3);
//...

在函数中（我猜是这样，因为您没有粘贴函数声明）：

查看此演示：


var svg=d3.select（“body”）.append（“svg”）.attr（“width”，500）.attr（“height”，200）；
var color2=d3.scaleOrdinal（）.range（['#673ab7'、'#9c27b0'、'#e91e63'、'#f44336'、'#ff5722'、'#ff9800'、'#ffc107'、'#ffeb3b'、'cddc39'、'8bc34a'、'4caf50'、'009688'））
.domain（d3.范围（1,13））；
功能图（尺寸、索引）{
svg.append（“rect”）.attr（“x”，Math.random（）*470）
.attr（“y”，Math.random（）*170）.attr（“宽度”，尺寸）.attr（“高度”，尺寸）
.attr（“fill”，函数（d，i）{console.log（“索引为”+i）；返回color2（索引）}）；
}
抽签（30，1）；抽签（10,2）；抽签（25,3）；抽签（20,4）；抽签（5,5）；
抽签（10,6）；抽签（8,7）；抽签（12,8）；抽签（10,9）；抽签（17,10）
非常感谢您！这解决了问题。请问你所说的索引永远是1是什么意思？这是指函数（d，i）中的i吗？抱歉，如果这些问题都是愚蠢的，我对d3完全是新手。@所有这些问题都不愚蠢。索引始终为0（第一个计数），因为它取决于匿名函数被调用的次数。我刚刚编辑了代码片段，请查看控制台。非常感谢！这解决了问题。请问你所说的索引永远是1是什么意思？这是指函数（d，i）中的i吗？抱歉，如果这些问题都是愚蠢的，我对d3完全是新手。@所有这些问题都不愚蠢。索引始终为0（第一个计数），因为它取决于匿名函数被调用的次数。我刚刚编辑了代码段，请检查控制台。