Question

我的点图上有重叠的数据点，并且读到d3不支持z-index作为在较小的元素下面订购较大元素（例如圆圈）的方法。我读到d3提供的解决方法之一是sort函数。为了在较小的圆圈下获得较大的圆圈，我的数据需要按分类变量进行排序。我的数据集如下所示：

year,rs,team,ra,champs,finals
2002,897,bears,697,yes,no
2003,877,bears,716,no,yes
2004,897,bears,808,no,yes
2002,873,lions,653,no,no
2003,765,lions,823,yes,no
2004,834,lions,722,no,yes
…

我有兴趣订购我的数据，以便首先绘制champs==="yes"的记录，然后绘制finals==="yes"的记录，最后绘制所有其他记录。我如何使用data.sort()函数来支持这样的排序？或者，有更好的方法吗？

Answer 1

正如meetamit指出的那样，缺少z-index支持不是由于D3，而是由于SVG。这意味着如果您没有使用SVG渲染可视化，那应该没问题。

要进行排序，您甚至不必使用D3的排序，但您可以使用vanilla Javascript sort。它需要一个sort函数，允许您控制元素的排序方式。如果它返回一个数字＆lt; 0，第一个元素小于第二个，如果＆gt; 0，它更大。所以你会有像

这样的东西

data.sort(function(a,b) {
  if(a.champs === "yes" && b.champs === "no") {
    return -1;
  } else if(a.champs === "no" && b.champs === "yes") {
    return 1;
  } else if(a.finals === "yes" && b.finals === "no") {
    return -1;
  } else if(a.finals === "no" && b.finals === "yes") {
    return 1;
  } else {
    return 0;
  }
});

d3 - 你能按分类变量排序吗？

1 个答案: