Question

我正在使用d3JS v5（也可以包含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轴的刻度为ids），并将每个Title的条形作为第二层。 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数据以整数而非字符串形式显示（删除＆＃34;＆＃34;）。

感谢。

 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");

Answer 1

经过多次搜索，我发现了一个与我的数据结构相似的例子。我在Brice Pierre de la Briere

之后使用了以下块

https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad

这是我的最终图表块。它还有高亮条，这样即使用户将鼠标放在条形图上方的空白区域，它下方的条形也会突出显示。

https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

d3JS v5为分组条形图的嵌套数据指定域

1 个答案: