d3.js - 对数刻度，范围为零和零

Posted 2023-01-18

我用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的范围。

无论如何，我要以对数标度来适应这个范围。问题在零范围内为零和零。

如何使用骨干以d3.js的对数标度容纳-15e9到15e9的范围？

使用d3.js 3.2.7

答案

您不能记录数字<= 0的日志（如果您想了解更多详细信息，请参阅math.stackexchange上的此问题）。您将不得不考虑使用不同的缩放系统或转换数据，以便所有值都> 0。

在不知道你正在绘制什么数据的情况下，我无法确定这个建议是否合适，但一个黑客就是并排绘制2个图表。右边的图表很简单，包含从最小正值到15E9的x值。左边的图表有一个从-15E9到接近零的值的x刻度，但是当你在d3中缩放它时，你必须使用从+ 15E9到你最小负值的绝对值的刻度域（即最接近零的负值）。将负x值传递给缩放函数时，您还必须获取它们的绝对值，以便它不会引发错误。关于这一点的混乱是因为数据从负到正交叉，因为x轴不会真正代表这里发生的事情;最终用户必须完全了解正在发生的事情，以免数据被误解。

UPDATE

检查here的工作小提琴。

对于教学法，我将数据集拆分为2;一个具有正x值（从1到1000），一个具有负x值（从-1到-1000）。本质上，代码的重要部分是xScaleLeft和xScaleRight函数，它们缩放到svg的左侧和右侧。使用xScaleLeft函数将负数据的一半映射到svg，并使用xScaleRight函数将正数据的一半映射到svg。我也在两个图表之间做了一个间隙，以明确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); );