javascript - D3v4 : indexing and selecting color set by scaleOrdinal

Question

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

我定义了 12 种可区分的颜色，但得到的结果是 this 。谁能帮我？谢谢。

  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);

Answer 1

第一个问题:在 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);
//...

并且，在函数中(我在这里猜测，因为您没有粘贴函数声明):

function lineChart(url, index){
    //all your previous code
    .style('stroke', function(){ return color2(index);})
    .attr('d', line);
};

查看此演示:

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.range(1,13));

function draw(dimention, index){
  svg.append("rect").attr("x", Math.random()*470)
  .attr("y", Math.random()*170).attr("width", dimention).attr("height", dimention)
  .attr("fill", function(d,i){ console.log("index is " + i); return color2(index)});
}
  
draw(30, 1);draw(10, 2);draw(25, 3);draw(20, 4);draw(5, 5);
draw(10, 6);draw(8, 7);draw(12, 8);draw(10, 9);draw(17, 10);

<script src="https://d3js.org/d3.v4.min.js"></script>