Question

我尝试使用D3来生成散点图，其中x轴是序数。你应该能够在http://plnkr.co/edit/c7iy6T?p=preview

看到一个小例子

我的第一个订单问题是：我如何转移＆＃34;集群＆＃34;因此，它们位于序数标签的顶部。

我的第二个问题是：如果我有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个簇，对于簇我知道x坐标将是＃34;居中＆＃34;在整数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: []
}

]

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

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

希望有所帮助。