javascript - D3js v5 分组条形图数据 x.domain 标签和数据分离

Question

我有以下格式的数据作为变量传入。

var groupeddata = 
  [{ Title: "Dummy Data", ID: "46", RFU: 20291, Name: "Name1", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "50", RFU: 15000, Name: "Name2", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "40", RFU: 14000, Name: "Name3", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data2", ID: "46", RFU: 21000, Name: "Name1", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "50", RFU: 18095, Name: "Name2", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "56", RFU: 27278, Name: "Name3", barcolor: "#8B008B"}];

如果数据是grouped by ID using the d3.nest function as I discussed in a previous problem，我就能够创建分组条形图。 : https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

但是，如果有两个条具有相同的“Name”属性值和不同的 ID(如上例所示)，则它们会显得很远。例如，Name3 在 ID 40(数据的第 3 行)和 ID 56(数据的第 6 行)处显示一个条形 ( https://bl.ocks.org/Coola85/86391f03bab40b16bdc24f1eedfba35f/ )。此外，如果 x 轴刻度标签也是简单的数字 1、2、3 而不是 ID 数字，那就没问题了。我不希望名称出现在 x 轴刻度标签上，因为名称太长，无法适合实际数据集。

我已经尝试这样做一段时间了，但没有成功，非常感谢您的帮助。

更新 1为了澄清一下，这是我希望它看起来像的图像: Ideal output. Note- the text and arrows which are dashed are only for reference and not desired in final output.

Answer 1

我认为您已经快完成了 - 只是您的 d3.nest 不正确。目前您对 ID 进行分组，但查看您的预期输出，但在任何地方都不需要。

更改分组以使用名称:

var databyID = d3.nest()
    .key(function(d) { return d.Name; })
    .entries(groupeddata);

这产生了以下内容，我认为这正是您想要的