javascript - d3.js 按两个轴对图进行排序

Question

我目前正在根据标题列表(x 轴)绘制数字列表(y 轴)。每个号码可以对应多个网站。现在我一直在使用 d3 提供的升序函数对它们进行排序。我目前有一个下拉菜单，可以在其中选择数字或标题，每个选项均按各自的选择单独排序。但是，我想知道是否有一种方法可以让我可以按标题按字母顺序排序，然后保持字母顺序，也按数字排序。目前我只能做其中之一。

示例: 我的数据存储在这样的 CSV 中:

"id","name"  
1,"youtube"  
1,"google"  
2,"google"  
3,"nike"  
4,"google"  

然后我使用

d3.csv("csvTestFile.csv", function (dataset) 

读取文件并将 ID 号转换为整数。

要排序，我执行以下操作:

data.sort(function(a, b) { return d3.ascending(a.id, b.id)});  

按 ID 排序。要按名称排序，我这样做:

data.sort(function(a, b) { return d3.ascending(a.name, b.name)});  

这两个都可以正常工作，但是我想首先按 ID 排序，然后再按名称排序。因此，轴将在 y 轴上显示(从原点开始)1、2、3、4，在 x 轴上显示 google、nike、youtube。现在，如果我尝试排序，它要么是 1, 2, 3, 4 到 y 轴，youtube, google, nike 到 x 轴，要么 google, youtube, nike 到 x 轴 1, 2 , 4, 3 沿 y 轴向上。

我想要的是 y 轴上的 1、2、3、4(按数字排序)和 x 轴上的 google、nike、youtube(按字母顺序排序)同时。鉴于这是一个散点图，它应该就像重新排列轴上的刻度一样简单，但我不太确定如何去做。

Answer 1

输入值映射到分类尺度的输出值的顺序取决于它们被赋予 .domain() 的顺序。要实现您想要的效果，您所需要做的就是在创建比例时对值进行相应的排序，即类似

var scale = d3.scale.ordinal()
   .domain(data.sort(function(a, b) { return d3.ascending(a.name, b.name); }))
   .range([...]);