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中的范围进行了测试。

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

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

使用d3.js 3.2.7

Answer 1

您无法记录数字的对数＆lt; = 0（如果您需要更多详细信息，请参阅math.stackexchange上的此问题）。您将不得不考虑使用不同的缩放系统或转换数据，以便所有值都是> 0

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

<强>更新

检查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); });