在新的遗物中，我们所做的最重要的事情之一是图表，偶尔结果比你可能期望的更复杂。例如，我们最近提出了一种聪明的方式来显示拆分尺度 - 在我们的图表中的破碎轴。我们正在分享这里希望其他人可能会发现我们的技术有用。
大多数时候，新的遗物的图表需要相对简单。通常，我们只需要用x和y轴绘制二维图表。但是，有时，我们希望通过将它们与它们之间的不太重要的数据隔离来突出重要事件。这在图表中创建了间隔，其中信息无法理解图表想要表达的内容。
在这些情况下，绘制数据的有用方式是使用断轴，其中轴跨度的一部分被移除，因此仅表示具有重要信息的点，例如图形形状中的尖峰或其他异常。
超越轴
到目前为止，我们对破裂轴情况的方法已经组成，渲染两张图表，一个图表在另一个图中。每个都是相同的宽度（总量的50％），它们将被它们之间的小区域分开，以指示轴被破坏。
不幸的是，这种方法有一些缺点：
1。每个图表的两个数据大小都必须相等。由于左和右图都有相同的像素大小，因此域尺寸也必须等同;否则，图表之间的单位大小在图表之间不会相同，并且组合的图表将很难理解。
2。如果要突出显示具有非常不同尺寸的两个事件，则必须将两个图表的域大小保持在更广泛的图表（见上文），这可以使更小的图表变得过于压缩以便轻松理解。
3.这种方法难以缩放以显示多个破碎的轴，特别是如果产生的件具有不同，任意尺寸。
创建D3兼容的线性刻度
目前，我们的大多数图表基础设施都是基于d3.js.，一个用于根据数据操作文档的JavaScript库。在D3中，您可以定义将数据点转换的方式（D3调用“域”）到屏幕上的像素（D3调用“范围”）通过使用尺度。D3提供多种类型的尺度，但损坏的轴通常以线性刻度显示。
我们的目标是创建一个D3兼容的线性刻度，您可以在那里剥离域的部分;使用时仍会工作而不是标准的线性刻度。
要在图表中绘制的每个域间隔称为d，我们可以N.其中，从d跑0.到D.N-1。每个域间隔都有一个开始（s）和结束（e），用于形式[s，e]，我们定义为dS.X和D.E.X。
在每个间隔之间，我们将具有一个区域，表示用于指示间隙的灰色out区域。间隙的长度是Z.，它在范围单元中定义，而不是域单元，因为我们不希望它根据图表的大小而增长或缩小。换句话说，Z.- 始终相同的大小 - 表示灰色输出区域的像素的宽度，并且与域的单位大小无关。
如果我们伸展图表，那么D0.，D.1，和D.2将平均大小，但由于z以像素中定义，因此它必须保持相同的大小。这是预期的结果：
为了从域从域转换到规模的目标，我们将把这种不连续的间隔集转换成一个跨越r的单个连续间隔S.到r.E.（到终值的范围的起始值）。
鳞片和范围的数学
所以问题看起来像这样：
目标是将D间隔转换为r间隔，以便稍后，当域的点需要转换为范围的点时，我们只是查找它所在的d间隔，并执行线性插值。
为实现这一目标，我们需要计算域和范围之间的比率：域中的数量等于范围内的单位。换句话说，来自域中的单元延伸了多少像素？
为此，我们必须将域的宽度除以范围的宽度。我们会称他们为wD.和W.R.：
- W.D.相当于所有域间隔的大小的总和：
- W.R.相当于范围的大小，减去灰色区域的宽度，我们必须绘制。我们删除它们，因为它们的大小是固定的，它们与域无关。和N.域间隔，有N.-1灰色区域，他们每个人都有一个Z.长度：
一旦我们具有比率，将每个域间隔（d）转换为范围间隔（r）需要三个步骤：
- 添加前一个间隔的所有尺寸（例如，r2你会添加d0.和D.1），并将它们乘以比率（wR./ W.D.）。
- 添加空白（Z.尺寸）根据需要（例如，r2需要两个差距：D之间的一个0.和D.1和d之间的一个1和D.2）。
- 添加一切的起源，这是rS.。
数学：
和
一旦我们计算了所有这些都是计算的，要转换任意点D，我们只需寻找D.N.其中d≠dN.，然后线性地插入这一点以使其进入范围（r）：
我们也可以证明rS.0.= R.S.那个R.E.N-1= R.E.;也就是说，第一范围的起始限制是原始范围的启动，最后范围的结束限制是原始范围的结束。
结论
通过这种方法，我们能够建立一个与其他尺度的完全相同的方式建立D3比例，所以我们可以将其插入我们现有的图表生态系统。
我们还通过能够通过任意尺寸的多次打破破碎轴的多个轴，而无需担心创造潜在的误导性视觉表示。这意味着其他工程师不必担心复杂方程来计算各种图表的大小或它们需要正确显示的复杂HTML。
我们的解决方案有其他好处。它使得能够创建其他破坏轴，例如对数或指数轴，例如，通过在将对数或指数上执行给定点之前的对数或指数。这可以与标准D3对数和指标相结合，以便我们从D3获得所有现有电源（例如，有意义的蜱虫，漂亮的边界等）。试一试，看看你是否可以提出自己的技术！
