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"}];

如果我使用d3.nest函数按ID对数据进行分组，则能够创建分组的条形图， 如我在上一个问题中所讨论的 ： https : //bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

但是，如果两个栏的“名称”属性值相同，并且ID与上述情况不同，则它们看起来很远。 例如，Name3在ID 40（数据的第3行）和ID 56（数据的第6行）处显示一个条形（ https://bl.ocks.org/Coola85/86391f03bab40b16bdc24f1eedfba35f/ ）。 另外，如果x轴刻度标签也是简单的数字1、2、3而不是ID号，那将是很好的。 我不希望这些名称出现在x轴刻度标签上，因为名称太长而无法放入实际的数据集中。

我已经尝试了一段时间，但是没有运气，我们将不胜感激。

更新1为了澄清，这是我想要的图像： 理想的输出。 注意-虚线的文本和箭头仅供参考，最终输出中不希望使用。

Answer 1

我认为您d3.nest -只是您的d3.nest错误。 您目前在ID上进行分组，但查看的是任何地方都不需要的预期输出。

更改分组以使用Name ：

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

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