使用javascript垂直和水平对齐图形的策略

Question

我想使用javascript（特别是d3.js）来对齐同一数据集的不同视图。这最终将是互动的，但我包括一个静态的例子来表明我的意思。等高线图和两个切片/投影（对应于等高线图中的光标）需要保持对齐/对齐。

我需要一个关于实现此目标的策略的建议，或者可能是指向示例的指针。我研究的大多数例子都有松散相关且不需要对齐的图形，而那些做对齐的图形在垂直方向上这样做。水平方向似乎更具挑战性。我看到这可能是相关的SO question，但我希望有一种纯javascript方法来确保对齐。

我希望我能给你一些我已经尝试过的示例代码但是我真的很早就在这个过程中我甚至不确定要走哪条路。如果必须，请投票给我，但我肯定会欣赏一些建议。

Answer 1

虽然它不能完全解决您的问题，但我想我会帮助您开始概述和简单（如果有点做作）的例子：

http://jsfiddle.net/TxZK3/3/

在这个例子中，我采用了轮廓图 - 直接来自D3示例页面 - 并将其与自身的副本并排放置。 CSS没有反映出你将如何准确地实现这一点，而是说明了这样的事情可以完成，并且进一步保持SVG视图空间的相同缩放是你如何正确地排序。简而言之：

  

  
1. 创建2个宽度和高度相同的SVG
  
2. 使用CSS将它们彼此相邻移动
  

该设置由以下代码段示例：

var margin = {top: 20, right: 20, bottom: 30, left: 30},
    width = 960/500 * 150 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

这些值在我的示例中由两个 SVG共享，因此意味着它们会绘制到相同大小的空间中。

之后，将在每个SVG空间内创建不同的可视化。当你创建轴'并在每个SVG中绘制东西时，D3会适当地缩放它们。设置基本图形后，最后一部分将确保每个图形具有匹配每个可视化的相应相应数据。在你的情况下，需要在与主图相同的可用轴上计算部分x或y。