javascript - 序数刻度类别10将所有内容映射到相同的颜色

我有一个带有一些动态比例的散点图，我有一些数据映射到了莱纳尔色标，并且效果很好。我尝试为一些离散数据设置序数色标，但它为每个值输出相同的颜色。

这是规模功能

var cScale = {

linear : function(arr, numFunc ){

    return d3.scale.linear()
        .domain( d3.extent(arr, numFunc) )
        .range([colorRange.min,colorRange.max])

},

ordinal : function(arr, ordinalFunc){
    return d3.scale.category10()
        // .domain(d3.extent(arr, ordinalFunc))
    }
}

用法如下

 window.cScaleFunc = cScale.ordinal

 fillCircleRef
    .attr("r", function(d){
        if(movieFilter(d))return 0;
        return rScaleFunc(arr, rDataFunc)(rDataFunc(d));
    })
    .attr("fill", function(d){
        return cScaleFunc(arr, cDataFunc)(cDataFunc(d));
    })

输出


  ＃1f77b4宝莱坞，＃1f77b4好莱坞

最佳答案

每次调用序数时，您都将返回一个新实例d3.scale.category10()

ordinal : function(arr, ordinalFunc){
    return d3.scale.category10()
        // .domain(d3.extent(arr, ordinalFunc))
    }
}

这样做：

var cScale = {
myScale : d3.scale.category10(),
linear : function(arr, numFunc ){

    return d3.scale.linear()
        .domain( d3.extent(arr, numFunc) )
        .range([colorRange.min,colorRange.max])

},

ordinal : function(arr, ordinalFunc){
    return this.myScale;//now there is a single scale and we dont inititialize evrytime its called
        // .domain(d3.extent(arr, ordinalFunc))
    }
}

希望这可以帮助！