d3.js - D3 带散点图的序数尺度

Question

我正在尝试使用 D3 生成一个以 x 轴为序数的散点图。您应该能够在以下位置看到一个小示例:http://plnkr.co/edit/c7iy6T?p=preview

我的第一个顺序问题是:我如何将“簇”移动，以便它们位于序数标签的顶部。

我的第二个问题是:如果我有 json

{x : 1.1, y : 1.9  ,label : foo}
{x :  .9, y : 2.2  ,label : foo}
{x : 2.1, y : 1.2  ,label : bar}
{x : 1.9, y : 5.3  ,label : bar}

将其显示在散点图中的最惯用方法是什么，以便标签基本上位于整数值 1,2 上，而数据则像使用线性比例散点图一样绘制。

编辑:

我的第二个问题涉及以下内容。我可以有 M 个簇，对于簇 m，我知道 x 坐标将以整数 m“为中心”。如上所述，所有 foo 值都比任何其他整数更接近 1。我希望能够传递像上面这样的结构。输出是典型的 x-y 图，但整数刻度已被抑制，仅出现标签。

Lars，下面的答案确实将我的值居中，但它似乎也忽略了任何其他比例并将 x 值压缩成一条线。这可以在以下位置看到:http://plnkr.co/edit/ncANkH?p=preview 。如果没有压缩问题，Lars 的解决方案将是理想的。

Answer 1

关于你的第二个问题(如果我理解正确的话)，你可以使用通常用于制作分组图表的相同逻辑(根据 this example )。基本上，您将创建两个 X 比例，一个用于在内部排列每个散点图的点，另一个用于在舞台上排列散点图本身。

range包装器(序数)比例的宽度将是舞台的宽度，而 range内部(线性)比例将为 x.rangeBand() 。您将绘制每个单独的散点图和 transform他们每个人根据包装规模单独。

为此，您的数据需要采用更有条理的格式，以便每个单独的散点图都有自己的对象。我做了this Plunk我认为可以达到你想要的效果。 (它有点难看，但 Plunk 网站对我来说慢得难以忍受，所以我放弃了美观。)

关于这是如何实现的，您可能需要注意两件事。首先，我将您的数据重新排列为以下格式:

var data = [
{
  name: 'baby',
  values: []
},
{
  name: 'adult',
  values: []
},
{
  name: 'youth',
  values: []
}

]

其次，我绑定(bind)了这个顶级数据来绘制三个SVG g组，然后使用 key function将二级数据绑定(bind)到圆圈，如下所示:

dotGroups.selectAll('.dot')
   .data(function(d) { return d.values; })

希望有帮助。