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

时间:2015-11-03 06:17:39

标签: javascript d3.js

我有一个带有动态比例的散点图,我有一些数据映射到linar色标,它的效果非常好。我尝试为某些离散数据设置序数色标,但它为每个值输出相同的颜色。

这是比例功能

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好莱坞

1 个答案:

答案 0 :(得分:1)

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

希望这有帮助!