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

但是，如果有两个条形图具有相同的“名称”属性值，并且具有与上述情况不同的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上进行分组，但查看了您在任何地方都不需要的预期输出。

将您的分组更改为使用Name：

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

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