D3.js多折线图动态添加Category10颜色失效问题求助

你遇到的动态颜色不生效问题，主要是由三个关键代码错误导致的，我帮你逐一拆解：

1. 颜色比例尺未正确初始化 #

你写的：

var color=d3.scale.category10

这里少了调用括号 ()，相当于只是引用了比例尺的构造函数，而没有生成可使用的比例尺实例。正确写法应该是：

var color = d3.scale.category10();

2. 样式回调函数未接收数据参数 #

你的.style回调里没有传入当前绑定的数据d，而且赋值d.color是多余的操作：

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

首先要把d作为参数传入，其次d.arr是一个数组，不能作为序数比例尺category10的输入值——这类比例尺需要的是可区分的离散值（比如每个折线的唯一标识、索引等）。比如可以直接用数据的索引来区分不同折线：

.style("stroke", function(d, i) { 
  // 用索引i作为比例尺输入，区分不同折线
  return color(i); 
})

3. 优先级与冗余设置冲突 #

你先通过.attr("stroke", "purple")设置了固定描边颜色，虽然理论上.style的优先级更高，但如果前面的错误导致.style执行失败，就会保留attr里的紫色。可以直接去掉这个固定的stroke属性，让动态样式完全接管。

修正后的完整关键代码片段 #

// 正确初始化颜色比例尺
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");

var viz = svg.selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr({ 
        d: function(d) { return lineFun(d.arr) }, 
        "stroke-width": 2, 
        "fill": "none", 
        "class":"line" 
    })
    // 用数据索引作为颜色区分依据，传入d和i参数
    .style("stroke", function(d, i) { 
        return color(i); 
    })
    .attr("transform", "translate(48, " + 10 +")") ;

另外补充一点：如果你的数据里有天然的分类字段（比如每个折线对应不同的产品、组别），可以把color(i)换成color(d.category)，这样颜色会和分类字段绑定，更具语义性。

内容的提问来源于stack exchange，提问作者Gerle Batde