Javascript d3JS v5从分组条形图的嵌套数据中指定域

我使用的是D3JSV5（也可以包括lodash）。 我有一个变量数据：

 var groupeddata =    [{Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
                       {Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"}, 
                       {Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},  
                       {Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"},
                       {Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"},
                       {Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}];

最后，我希望根据ID对数据进行分组（即，将x轴标记作为ID），并将每个标题的条形图作为第二层。RFU是条形图的高度，条形图应根据条形图的颜色进行着色。 我在玩nest函数，根据id对数据进行分组。我不确定这是否是必需的，但我能够创建一个新阵列，如下所示：

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

产出：

       [{key: "46", values:[
           {Title: "Dummy Data", ID: "46", RFU:20291, barcolor: "#ff7f00"},
           {Title: "Dummy Data2", ID: "46", RFU:21, barcolor: "#ff7f00"}] 
        },
       {key: "50", values:[
           {Title: "Dummy Data", ID: "50", RFU:63, barcolor: "#ff7f00"},
           {Title: "Dummy Data2", ID: "50", RFU:18095, barcolor: "#ff7f00"}]
        },
       {key: "56", values:[
               {Title: "Dummy Data", ID: "56", RFU:6, barcolor: "#ff7f00"},
           {Title: "Dummy Data2", ID: "56", RFU:27278, barcolor: "#ff7f00"}]
        }]

我无法生成具有以下代码的分组条形图。它只生成轴，没有记号或条。 我认为这主要是因为我没有指定正确的方法来获取数组中的值，以指定x0domain、x1domain和ydomain。虽然我可能完全错了：）。感谢您的帮助。 如果这个问题很傻，请原谅我，因为我是D3js新手，还在学习。如果需要更多信息，请告诉我

更新1:RFU数据以整数而不是字符串的形式出现（删除了“”

谢谢

 var groupeddata =   [{Title: "Dummy Data", ID: "46", RFU:"20291", barcolor: "#ff7f00"},
           {Title: "Dummy Data", ID: "50", RFU:"63", barcolor: "#ff7f00"}, 
           {Title: "Dummy Data", ID: "56", RFU:"6", barcolor: "#ff7f00"},  
           {Title: "Dummy Data2", ID: "46", RFU:"21", barcolor: "#ff7f00"},
           {Title: "Dummy Data2", ID: "50", RFU:"18095", barcolor: "#ff7f00"},
           {Title: "Dummy Data2", ID: "56", RFU:"27278", barcolor: "#ff7f00"}];

  console.log(groupeddata);

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

 divWidth = 700;
  var margin = {top: 30,   right: 100,   bottom: 50,    left: 100,    },
    width = divWidth - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom,

x0 = d3.scaleBand()
.range([0, width - 20], 0.1)
.domain(databyID.map(function(d) {
  d.values.map(function(c) {
    return c.ID;
  }); })),
x1 = d3.scaleBand()
.domain(databyID.map(function(d) {
  d.values.map(function(c) {
    return c.Title;
  }); })),
y = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(databyID, function(d) {
  d.values.map(function(c) {
    return c.RFU;
  }); })]);


  //setup the axis
  var xAxis = d3.axisBottom(x0);
  var yAxis = d3.axisLeft(y);

  var groupedbardiv = d3.select("#groupedBars")
    .append("svg")
    .attr("width", width + margin.left + margin.right - 100)
    .attr("height", height + margin.top + margin.bottom - 10)
    .append("g")
    .attr("transform", "translate (" + margin.left + "," + margin.top + ")");

 //create the x-axis
    groupedbardiv.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate (0, " + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "middle")
      .attr("dx", "0em")
      .attr("dy", "-0.55em")
      .attr("y", 30)
      .attr("class", "x-axisticks");
    groupedbardiv.append("text")
      .attr("tranform", "rotate(0)")
      .attr("class", "x axis")
      .attr("x", width)
      .attr("y", height)
      .attr("dy", "0.5em")
      .attr("text-anchor", "end")
      .text("ID")
      .attr("transform", "rotate(0)");

  //create the y-axis
    groupedbardiv.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "y axis")
      .attr("tranform", "rotate(-90)")
      .attr("y", -10)
      .attr("dy", "0.8em")
      .attr("dx", "3em")
      .attr("text-anchor", "end")
      .text("RFU")
      .attr("transform", "rotate(-90)");

 var bar = groupedbardiv.selectAll("bar")
      .data(databyID)
      .enter()
      .append("rect")
      .style("fill", barcolors)
      .attr("x", function(d) {
        return x0(d.ID);
      })
      .attr("width", x0.bandwidth() - 0.1)
      .attr("y", function(d) {
        return y(d.values.RFU);
      })
      .attr("height", function(d) {
        return height - y(d.values.RFU);
      })
      .attr("fill-opacity", "1.0")
      .attr("class", "y-data");

---

经过多次搜索，我找到了一个数据结构与我相似的示例。我用了下面的街区

这是我的最后一张图表。它还具有高亮显示栏，因此即使用户将鼠标放在栏上方的空白处，其下方的栏也会高亮显示

---

您需要每个ID的RFU总和吗？不，不是总和。。。只是每个id每个标题的单个RFU级别。