JavaScript D3.js v4 - 如何使用D3.Stack与从AJAX调用SharePoint 2013创建的D3.Nest嵌套数组创建堆叠条形图

Question

我正在试图制作一个如下所示的图表：

我有一个D3.nest数据结构，看起来像这样：

{"key":"Area 1","values":[ 
    {"key":"5. Validation Complete","value":12.5}, 
    {"key":"Deferred","value":1}, 
    {"key":"3. Identify & Validate Proposed Solutions","value":5}, 
    {"key":"1. Define & Describe the Problem or Opportunity","value":0}]}, 
{"key":"Area 2","values":[ 
    {"key":"5. Validation Complete","value":41.2}, 
    {"key":"4. Implement the Solutions","value":86.6}, 
    {"key":"3. Identify & Validate Proposed Solutions","value":6}, 
    {"key":"2. Identify Root Causes","value":4}, 
    {"key":"1. Define & Describe the Problem or Opportunity","value":9}]}, 
{"key":"Area 3","values":[ 
    {"key":"5. Validation Complete","value":40}, 
    {"key":"4. Implement the Solutions","value":49.2}, 
    {"key":"3. Identify & Validate Proposed Solutions","value":10.4}]}, 
{"key":"Area 4","values":[ 
    {"key":"Deferred","value":0.25}, 
    {"key":"4. Implement the Solutions","value":28}, 
    {"key":"3. Identify & Validate Proposed Solutions","value":84.9}, 
    {"key":"2. Identify Root Causes","value":0}]} 

我zKeys的结构为：

我没有成功尝试Bostock's Stacked Bar Chart Example和此SO post。

这里是我的代码：

var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1); 
var y = d3.scaleLinear().rangeRound([height, 0]); 
var z = d3.scaleOrdinal().range(["#F8A11E", "#E51F36", "#582C85", "#1C92D0", "#017165", "#7F7F7F"]);  

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var sharepointStatusArray = getListData("Points List","ID,Title,Color_Code"); 
var data=getListData("Points%20List","$select=Area,StatusID,Points,Status/Title&$expand=Status"); 

var zKeys = []; 

sharepointStatusArray.forEach(function(d) 
{ 
    zKeys.push(d.Title); 
}); 

var nestData = d3.nest() 
    .key(function(d) { return d.Area; }) 
    .key(function(d) { return d.Status.Title; }) 
    .rollup(function(v) { return d3.sum(v, function(d) { return d.Points; }); }) 
    .entries(data); 

    nestData.sort(function(a,b) {return b.total - a.total;}); 
    x.domain(nestData.map(function(d) { return d.key; })); 
    y.domain([0, d3.max(nestData, function(d){return d3.sum(d.values, function(d){return d.value})})+20]).nice(); 
    z.domain(zKeys) 

    g.append("g") 
    .selectAll(".serie") 
    .data(d3.stack().keys(zKeys)(nestData)) 
    .enter().append("g") 
     .attr("class","serie") 
     .selectAll("rect") 
     .data(function(d) { return d; }) 
     .enter().append("rect") 
      .attr("class", "bar") 
      .attr("fill", function(d) { return z(d.key);}) 
      .attr("x", function(d) {return x(d.data.key);})   
      .attr("y", function(d) {return y(d[1]);}) 
      .attr("height", function(d) { return y(d[0]) - y(d[1]); }) 
      .attr("width", x.bandwidth()); 

    g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

    g.append("g") 
     .attr("class", "axis") 
     .call(d3.axisLeft(y).ticks(null, "s")) 
    .append("text") 
     .attr("x", 2) 
     .attr("y", y(y.ticks().pop()) + 0.5) 
     .attr("dy", "0.32em") 
     .attr("fill", "#000") 
     .attr("font-weight", "bold") 
     .attr("text-anchor", "start") 
     .text("Hours"); 


    //Creating legend for colors 
     var legend = g.append("g") 
     .attr("font-family", "sans-serif") 
     .attr("font-size", 10) 
     .attr("text-anchor", "end") 
    .selectAll("g") 
    .data(zKeys.slice()) 
    .enter().append("g") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 19) 
     .attr("width", 19) 
     .attr("height", 19) 
     .attr("fill", z); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9.5) 
     .attr("dy", "0.32em") 
     .text(function(d) { return d; }); 

我不能让堆积条形图根据实例绘制。几乎每个例子都使用d3.csv，而不是d3.nest，所以我对这些例子如何转化为具有输出数组的d3.nest场景感到迷茫。

任何人都可以帮我吗？谢谢。

Answer 1

我最终找到了自己的问题的答案。 我发现的一件事情是，我发现处理d3.stack（）的所有信息都表明发送给函数的数据需要2D（2维）。这是d3.nest（）输出很好的东西。结果不准确。 我应该从一开始就这样做，但我调试了示例Mike Bostock’s Stacked Bar Chart，并发现每个人在其示例中使用的d3.csv（）的输出实际上都会输出一维数组，每个元素都包含数据的键/值对显示在每个矩形中。

我可能做了一个非常迂回的做法，但这里是我做了什么来解决我没有正确的数据结构为d3.stack（）的问题。

1）我保持d3.nest的使用（）输出，因为它允许我单个值总结为单个键/值对这样的每个元素：

2）I然后消毒，使用下面的代码数据输出得到它看起来像d3.csv（）在所有实施例的输出（添加键/值默认缺失数据和压扁的结构：

//BEGIN data cleanup for d3.stack 
//Add default values for missing data points to make each array formatted the same 
    nestData = nestData.map(function(keyObj) { 
     return { 
      key: keyObj.key, 
      values: zKeys.map(function(k) { 
        value = keyObj.values.filter(function(v) { return v.key == k; })[0]; 
        return value || ({key: k, value: 0}); 
       }) 
     }; 
    }); 

//Loop through the nested array and create a new array element that converts each individual nested element into a key/value pair in a single object. 
var flatData = []; 
nestData.forEach(function(d) { 
    var obj = { Area: d.key } 
     d.values.forEach(function(f) { 
      obj[f.key] = f.value; 
     }); 
    flatData.push(obj); 
    }); 
//END data cleanup for d3.stack 

的数据现在看起来像这样：

3）数据消毒后，我就能够从Mike的例子中使用的代码开箱像这样：

x.domain(flatData.map(function(d) { return d.Area; })); 
    y.domain([0, d3.max(nestData, function(d){return d3.sum(d.values, function(d){return d.value})})+20]); 
    z.domain(zKeys) 

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    g.append("g") 
    .selectAll("g") 
    .data(d3.stack().keys(zKeys)(flatData)) 
    .enter().append("g") 
     .attr("fill", function(d) { return z(d.key); }) 
    .selectAll("rect") 
    .data(function(d) { return d; }) 
    .enter().append("rect") 
     .attr("x", function(d) { return x(d.data.Area); }) 
     .attr("y", function(d) { return y(d[1]); }) 
     .attr("height", function(d) { return y(d[0]) - y(d[1]); }) 
     .attr("width", x.bandwidth());