为多折线图动态添加颜色，但在 d3.js 中不起作用

Question

我创建了这个曲线图，我只用紫色填充。然后我决定添加颜色范围，我使用的颜色缩放方法是 Category10，但它不起作用。我是 D3.js 的新手，过去一周我一直很头疼。

为了让它看起来更漂亮，我需要添加颜色，我确实尝试过使用 .style 属性来添加这种方式，但是

function buildLine(data){

        var xScale=d3.scale.linear()
                            .domain([0,d3.max(data,function(d){return d.spend;})])
                            .range([0, w]);

        var yScale=d3.scale.linear()
                            .domain([0,d3.max(data,function(d){return d.alpha;})])
                            .range([h/2, 0]);



        var yAxisGen=d3.svg.axis().scale(yScale).orient("left");                 
        var xAxisGen=d3.svg.axis().scale(xScale).orient("bottom");

        var svg=d3.select("body").append("svg").attr({width:w,height:h});

        var yAxis= svg.append("g")
                      .call(yAxisGen)
                      .attr("class","axis")
                      .attr("transform", "translate(50, " +10 +")");
        var xAxisTranslate = h/2 + 10;    
        var xAxis= svg.append("g")
                      .call(xAxisGen)
                      .attr("class","axis")
                      .attr("transform", "translate(50, " + xAxisTranslate  +")");

在这里添加颜色功能

        var color=d3.scale.category10               
        var lineFun = d3.svg.line()
                  .x(function (d) { return xScale(d.x); })
                  .y(function (d) { return yScale(d.y); })
                  .interpolate("basis");  

这里我尝试动态添加它。 '.style 不起作用。为什么？'

   var viz = svg.selectAll("path")
              .data(data)
              .enter()
              .append("path")
              .attr({
                d: function(d) {
                  return lineFun(d.arr)
                },
                "stroke": "purple",
                "stroke-width": 2,
                "fill": "none",
                "class":"line"
              })
              .style("stroke",function(){
                  return d.color=color(d.arr);
              })
              .attr("transform", "translate(48, " + 10 +")")
              ;    




}

      d3.json("sample-data.json",function(error,data){

                //check the file loaded properly
                if (error) {  //is there an error?
                    console.log(error);  //if so, log it to the console
                } else {      //If not we're golden!
                      //Now show me the money!
                    ds=data; //put the data in the global var
                }
            data.forEach(function(jsonData){
                 var lineData = d3.range(0, jsonData.spend, 100)
                    .map(x => [x, (jsonData.alpha * (1 - Math.pow(2.71828, (-jsonData.beta * x))))] );
                       /*  console.log("this is the data:",lineData);*/
                    //i think line date returns an array with each item in it also an array of 2 items
                    var arr = [];
                    for (var i = 0; i < lineData.length; i++) {
                        arr.push({
                           x: lineData[i][0],  
                           y: lineData[i][1]
                        });
                    }
                    jsonData.arr = arr;
                   console.log(jsonData);
            });

           buildLine(data);
      });

Answer 1

这些是问题：

1. 你必须调用 scale 函数：

   var color=d3.scale.category10()
   //parentheses here ----------^
   

2. 如果不设置匿名函数参数，则不能使用参数d：

   .style("stroke",function(d){
       //parameter here-----^
       return d.color=color(d.arr);
   })
   

3. scale.category10() 在“先到先得” 的基础上工作。你只需要索引：

   .style("stroke",function(d,i){
       return d.color=color(i);
   });
   

这是一个演示如何使用该比例的演示：

var color = d3.scale.category10();
var divs = d3.select("body").selectAll(null)
  .data(d3.range(10))
  .enter()
  .append("div")
  .style("background-color", function(d, i) {
    return color(i)
  })

div {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 2px;
}

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