在 d3 中创建具有绝对值的轴答案

【问题标题】：Creating an axis with absolute value in d3在 d3 中创建具有绝对值的轴
【发布时间】：2015-03-13 02:02:40
【问题描述】：

我在 d3 中创建了一个带有负值的条形图。该图表显示了两队在一系列比赛中的得分差异，因此如果 A 队以 3 分的优势战胜 B 队，则数据点为 -3。如果 B 队以 3 分获胜，则数据点为 3。

图表本身很好，但我希望轴反映数据点的绝对值。我试过了：

var xAxis = d3.svg.axis()
    .scale(Math.abs(x))
    .orient("top");

但这似乎没有奏效。欢迎任何想法。

谢谢，乔恩

【问题讨论】：

您对轴的设置对我来说似乎不太正确。 scale 应该链接回 d3.scale 函数，例如 d3.scale.linear()。然后，d3 比例将具有输出 range 和输入 domain。您需要使用d3.extent(data, function(d) { return Math.abs(d); }). 之类的东西来计算域。要查看这一切无所作为，请查看bl.ock。
对不起。我知道我没有说清楚。我对整个编码事情比较陌生。我有一个 d3.scale.linear() 和一个计算域。图表本身画得很好。我想要做的是标记轴，而不是显示-3、-2、-1、0、1、2、3，而是显示3、2、1、0、1、2、3，即使图表本身将绘制负吟游诗人。本质上，这个图表：stackoverflow.com/questions/10127402/…，但轴的两侧显示正数。
啊，那完全是另一回事。如何以某种方式使用序数比例。或者您可以关闭轴上的标签，计算数字[3,2,1,0,1,2,3] 的位置并编写自定义轴标签以将它们写在那里。计算位置很容易，因为您已经有了轴。希望这会有所帮助。
今天终于能够重新开始工作，并在您提到自定义轴后找到解决方案。使用 .tickFormat(Math.abs) 就可以了。感谢您的帮助。

标签： svg d3.js

【解决方案1】：

此行为未记录在案，但可以通过以下方式将函数传递给 tickFormat：

tickFormat(Math.abs)

您甚至可以进行更复杂的格式化，例如：

tickFormat(function (v) {
    return Math.abs(v) + '%';
})

查看tickFormat's source code，我找不到这种行为的任何证据。所以，看起来这甚至不是预期的，但它仍然有效。这只是一个猜测，但可能在底层某处调用了传递的函数。

P.S.：OP 已经回答了这个问题in a comment，但我把它贴在这里是为了让其他人更容易找到它。

【讨论】：