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

【问题标题】：D3js v5 grouped bar chart data x.domain labels and data separatedD3js v5 分组条形图数据 x.domain 标签和数据分离
【发布时间】：2023-03-11 14:02:02
【问题描述】：

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

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.

【问题讨论】：

你能模拟出你想要的样子吗？我现在发现这个问题有点令人困惑......
抱歉给您带来了困惑，感谢 Ian 的回复。我已经用图片更新了帖子，让你看看我想要的输出。另请注意，x 轴刻度只是 1、2 和 3，而不是名称。如果我按名称嵌套，然后对数据进行排序和呈现，则名称会出现在 x 轴刻度标签上，这是不需要的，因为最终数据中的名称很长。

标签： javascript arrays d3.js data-visualization

【解决方案1】：

我想你快到了 - 只是你的 d3.nest 不正确。您目前在ID 上进行分组，但正在查看您在任何地方都不需要的预期输出。

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

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

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

【讨论】：

谢谢伊恩。是的。通过将 d.ID 替换为 d.Name 我已经达到了这一点，我能够生产你所拥有的。但是，我不希望下面的标签是 Name1、Name2、Name3。相反，我希望它们是 ID 或只是通用的 1、2、3。
要替换它们，您将需要在'1' ==> 'Name1' 等之间进行某种形式的查找。您可以在一开始就重新调整您的数据吗？这将是最简单的方法
对数据进行排序后，我可以克隆databyID，然后替换保留顺序的键吗？然后将带有 1 2 3 的新数组发送到 d3js 图表中？这是可能的还是我的逻辑在某种程度上有缺陷？ javascript 新手不确定我需要用来选择性地替换所有键的确切功能。注意 - 最终数据集没有“名称”，而是完全随机的。