2

我正在尝试使用 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 个集群，因为集群 mi 知道 x 坐标将围绕整数 m“居中”。最重要的是，所有 foo 值都比任何其他整数更接近 1。我希望能够传递像上面这样的结构。并让输出是典型的 xy 图，但整数刻度已被抑制且仅显示标签。

Lars，下面的答案确实使我的值居中，但它似乎也忽略了任何其他比例并将 x 值压缩成一条线。这可见于：http ://plnkr.co/edit/ncANkH?p=preview 。Lars 解决方案将是理想的，但对于压缩问题。

4

1 回答 1

2

关于您的第二个问题（如果我理解正确的话），您可以使用通常用于制作分组图表的相同逻辑（根据此示例）。基本上，您将创建两个 X 刻度，一个用于在内部排列每个散点图的点，另一个用于在舞台上自行排列散点图。

包装器range（序数）比例的 将是舞台的宽度，而range内部（线性）比例的 将是x.rangeBand()。transform您将根据包装比例分别绘制每个散点图和每个散点图。

为此，您的数据需要采用更有条理的格式，以便每个散点图都有自己的对象。我制作了这个 Plunk，我认为它可以实现您想要的。（这有点难看，但 Plunk 网站对我来说速度太慢了，所以我放弃了美学。）

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

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

]

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

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

希望有帮助。

于 2013-06-10T03:49:04.020 回答