如何操作 svg 图表的轴？答案

【问题标题】：How do I manipulate the axis of a svg chart?如何操作 svg 图表的轴？
【发布时间】：2017-02-01 07:07:40
【问题描述】：

我正在使用 d3.js 和 epoch 绘制散点图。成为图表中圆圈的值基于对数值，这使我的两个轴都低于零。

 var chart = $('#scatterchart').epoch({ type: 'scatter', data: scatterData, axes: ['bottom', 'left'], ticks: { right: 4, bottom: 4}, domain: [-1.4, 2], range: [-2,4], margins: { top: 10, right: 80, bottom: 60, left: 80 }, });

我想保持圆圈的位置，但要操纵轴，以便：

x(horisontal):
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4

y(vertical):
-2 -> 0.25
-1 -> 0.5
0 -> 1
1 -> 2
2 -> 4
3 -> 8
4 -> 16

有人对如何执行此操作有任何建议吗？

【问题讨论】：

您的意思是替换刻度标签（-1 变为 .5，0 变为 1，...）？
@Anna 仅使用 d3 将非常容易：var myScale = d3.scalePow().exponent(2)。但是，根据 Epoch 文档，您似乎无法设置 d3 比例的类型。
@GuitarExtended，一模一样。现在我隐藏了当前标签，以便圆圈看起来正好在图表上，我想找到一种方法将标签值从 -1 转换为 0.5 等。

标签： d3.js svg epoch.js

【解决方案1】：

我没有使用 epoch.js 的经验，我不知道您是否可以调整它创建的轴。但是您可以尝试在将数据输入散点图生成器之前对其进行转换。

如果 scatterData 是一个数组，你可以使用 array.map():

newData = scatterData.map(function(d){return someTransformFuntion(d);});

并相应地调整轴的输入域（实际上是您的比例）。

【讨论】：

【解决方案2】：

我没有时代的经验。

但假设它在 d3js 之上运行，您需要做的就是更改两个秤的域。

当您将数据可视化时，您需要使用域（用于数据）和范围（屏幕上的像素）。因此，要支持负值，您需要调整域以支持 [-2, 4]（对于 y 轴示例）。

作为奖励阅读一些关于 domains 和 negative values 的文章

【讨论】：