javascript - 序数比例类别 10 将所有内容映射到相同颜色

Question

我有一个带有一些动态比例的散点图，我有一些映射到线性色标的数据，它工作得很好。我尝试为一些离散数据设置序数色标，但它为每个值输出相同的颜色。

这是缩放功能

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 bollywood, #1f77b4 hollywood

Answer 1

每次调用序数时，您都会返回一个新实例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))
    }
}

希望这有帮助!