自定义 d3 线性刻度，returns 空值而不是 0

Question

我正在尝试创建一个 d3.scale.linear() 比例尺，在输入数据时为我的折线图输出值。我的数据集包含 0 到 100 之间的值，以及 null 值。图表必须显示数据中的差距，因此除了 returning 任何整数输入的整数值外，如果我输入 null，我还需要将比例缩放到 return null。如果传入 null，则常规 d3.scale.linear() 将 return 0。

我最初的解决方案是执行以下操作：

    var customScale = function(val){
        if (val === null) return null;
        else return d3.scale.linear().domain([0, 100])(val);    
    }

所以 customScale(50) returns 0.5 和 customScale(null) returns null.

但是，这样做意味着我失去了 d3.scale.linear() 的其他功能，例如 .invert()

有没有办法以某种方式扩展 d3.scale.linear() 以便它可以包含我的自定义条件？

Answer 1

D3 的处理方式不是在比例尺中，而是在您将比例尺传递给的形状生成函数中。 D3为此提供了函数.defined()。例如，如果您要画一条线：

var line = d3.svg.line()
  .x(function(d) { return x(d.x); })
  .defined(function(d) { return d.x !== null; });

定义省略此类值的自定义比例的问题在于，轴等其他东西会损坏。同样，您不会失去体重秤通过此方法提供的任何其他功能。

Answer 2

对于空值，我的函数 returns null（在本例中为 d3.scale.liner() returns 0）。主要方法是包装原始比例及其所有方法。

我没有针对所有情况测试此功能。但对于基本功能，它是有效的。不幸的是我没有找到更简单的方法:(

/**
 * d3.scale.linear() retrun 0 for null value
 * I need to get null in this case
 * This is a wrapper for d3.scale.linear()
 */
_getLinearScaleWithNull: function() {
    var alternativeScale = function(origLineScale) {
        var origScale = origLineScale ? origLineScale : d3.scale.linear();

        function scale(x) {
            if (x === null) return null; //this is the implementation of new behaviour
            return origScale(x);
        }

        scale.domain = function(x) {
            if (!arguments.length) return origScale.domain();
            origScale.domain(x);
            return scale;
        }

        scale.range = function(x) {
            if (!arguments.length) return origScale.range();
            origScale.range(x);
            return scale;
        }

        scale.copy = function() {
            return alternativeScale(origScale.copy());
        }

        scale.invert = function(x) {
            return origScale.invert(x);
        }

        scale.nice = function(m) {
            origScale = origScale.nice(m);
            return scale;
        }

        scale.ticks = function(m) {
            return origScale.ticks(m);
        };


        scale.tickFormat = function(m, Format) {
            return origScale.tickFormat(m, Format);
        }

        return scale;
    }

    return alternativeScale();
},

自定义 d3 线性刻度，returns 空值而不是 0

custom d3 linear scale that returns null for null values instead of 0

javascript

d3.js