javascript - d3.js - 范围为负和零的对数刻度

Question

我已经使用 d3 构建了一个带有跟随轴的时间轴。

        var width = 900,
        padding = 30;

        var yScale = d3.scale.linear()
                    .domain([0,0 ])   
                    .range([0, 0]);   

        var xScale = d3.scale.genericLog()
                    .domain([-15e9,15e9])        
                    .range([(padding/2), width - padding * 2]).nice();

对于 d3.scale.genericLog() 我使用了 this solution .并且还在 this fiddle 中用我的范围进行了测试.

无论如何，我必须以对数刻度来适应这个范围。该问题在一个范围内为负和零。

如何使用 backbone 在 d3.js 的对数刻度中容纳 -15e9 到 15e9 的范围？？？？？

使用 d3.js 3.2.7

Answer 1

您不能获取一个数字 <=0 的日志(如果您需要更多详细信息，请参阅 math.stackexchange 上的这个问题)。您将不得不考虑使用不同的缩放系统或转换您的数据，以便所有值都 > 0。

在不知道您绘制的是什么数据的情况下，我无法确定这个建议是否合适，但一个技巧是并排绘制 2 个图表。右边的图表很简单，包含从最小正值到 15E9 的 x 值。左边的图表会有一个从 -15E9 到接近零的值的 x 刻度，但是当你在 d3 中缩放它时，你必须使用从 +15E9 到最小负值的绝对值的刻度域(即最接近零的负值)。将负 x 值传递给缩放函数时，您还必须采用它们的绝对值，这样它就不会抛出错误。关于这一点的困惑之处在于数据从负到正交叉，因为 x 轴不会真正代表这里发生的事情；最终用户必须充分了解正在发生的事情，以免数据被误解。

更新

检查 here用于工作 fiddle 。

对于教学法，我将数据集分成了 2 个；一个具有正 x 值(从 1 到 1000)，一个具有负 x 值(从 -1 到 -1000)。本质上，代码的重要部分是 xScaleLeft 和 xScaleRight 函数，它们缩放到 svg 的左侧和右侧。使用 xScaleLeft 函数将数据的负半部分映射到 svg，使用 xScaleRight 函数将数据的正半部分映射到 svg。我还在 2 个图表之间做了一个间隙，以明确 x 轴不是连续的。

var xScaleLeft = d3.scale.log()
   .domain([1, 1000])
   .range([(width/2) - margin.middle, 0]);

var xScaleRight = d3.scale.log()
   .domain([1, 1000])
   .range([(width/2) + margin.middle, width]);

在绘制负数据集的值时，我们还需要取绝对值:

var lineLeft = d3.svg.line()
    .x(function (d) { return xScaleLeft(Math.abs(d.x)); })
    .y(function (d) { return yScaleBoth(d.y); });