關於D3堆疊條形圖結構

當數據爲正常格式時，我無法創建d3堆疊條形圖（垂直）。但是這種格式，我發現很難繪製圖表。如果有人能指出我的一個例子，其中的數據是我在下面給出的格式，將非常感激。我嘗試了很多例子。所有使用不同的結構。至少讓我知道這個結構是否可以堆疊酒吧。我的格式。關於D3堆疊條形圖結構

[ 
    { 
    "key": "AK", 
    "values": [ 
     { 
     "state": "AK", 
     "zip": "99546", 
     "sum(quantity)": "623.95" 
     } 
    ] 
    }, 
    { 
    "key": "AL", 
    "values": [ 
     { 
     "state": "AL", 
     "zip": "35440", 
     "sum(quantity)": "265.40" 
     } 
    ] 
    }, 
    { 
    "key": "CA", 
    "values": [ 
     { 
     "state": "CA", 
     "zip": "93510", 
     "sum(quantity)": "682.81" 
     }, 
     { 
     "state": "CA", 
     "zip": "95220", 
     "sum(quantity)": "367.14" 
     } 
    ] 
    }, 
    { 
    "key": "GA", 
    "values": [ 
     { 
     "state": "GA", 
     "zip": "30102", 
     "sum(quantity)": "609.85" 
     }, 
     { 
     "state": "GA", 
     "zip": "30103", 
     "sum(quantity)": "691.53" 
     } 
    ] 
    }, 
    { 
    "key": "IA", 
    "values": [ 
     { 
     "state": "IA", 
     "zip": "50001", 
     "sum(quantity)": "597.52" 
     }, 
     { 
     "state": "IA", 
     "zip": "50601", 
     "sum(quantity)": "741.38" 
     } 
    ] 
    }, 
    { 
    "key": "IL", 
    "values": [ 
     { 
     "state": "IL", 
     "zip": "62214", 
     "sum(quantity)": "564.20" 
     } 
    ] 
    }, 
    { 
    "key": "LA", 
    "values": [ 
     { 
     "state": "LA", 
     "zip": "70420", 
     "sum(quantity)": "576.45" 
     }, 
     { 
     "state": "LA", 
     "zip": "70511", 
     "sum(quantity)": "377.81" 
     }, 
     { 
     "state": "LA", 
     "zip": "70710", 
     "sum(quantity)": "398.69" 
     } 
    ] 
    }, 
    { 
    "key": "MD", 
    "values": [ 
     { 
     "state": "MD", 
     "zip": "20606", 
     "sum(quantity)": "423.71" 
     }, 
     { 
     "state": "MD", 
     "zip": "20607", 
     "sum(quantity)": "544.17" 
     }, 
     { 
     "state": "MD", 
     "zip": "21005", 
     "sum(quantity)": "233.74" 
     }, 
     { 
     "state": "MD", 
     "zip": "21520", 
     "sum(quantity)": "601.30" 
     } 
    ] 
    }, 
    { 
    "key": "ME", 
    "values": [ 
     { 
     "state": "ME", 
     "zip": "4406", 
     "sum(quantity)": "238.58" 
     }, 
     { 
     "state": "ME", 
     "zip": "4606", 
     "sum(quantity)": "412.01" 
     } 
    ] 
    }, 
    { 
    "key": "MS", 
    "values": [ 
     { 
     "state": "MS", 
     "zip": "39735", 
     "sum(quantity)": "486.00" 
     } 
    ] 
    }, 
    { 
    "key": "MT", 
    "values": [ 
     { 
     "state": "MT", 
     "zip": "59001", 
     "sum(quantity)": "434.12" 
     } 
    ] 
    }, 
    { 
    "key": "ND", 
    "values": [ 
     { 
     "state": "ND", 
     "zip": "58001", 
     "sum(quantity)": "122.81" 
     }, 
     { 
     "state": "ND", 
     "zip": "58002", 
     "sum(quantity)": "883.31" 
     } 
    ] 
    }, 
    { 
    "key": "NE", 
    "values": [ 
     { 
     "state": "NE", 
     "zip": "68001", 
     "sum(quantity)": "605.27" 
     } 
    ] 
    }, 
    { 
    "key": "NJ", 
    "values": [ 
     { 
     "state": "NJ", 
     "zip": "8205", 
     "sum(quantity)": "630.63" 
     } 
    ] 
    }, 
    { 
    "key": "NM", 
    "values": [ 
     { 
     "state": "NM", 
     "zip": "87510", 
     "sum(quantity)": "1059.78" 
     } 
    ] 
    }, 
    { 
    "key": "NY", 
    "values": [ 
     { 
     "state": "NY", 
     "zip": "12404", 
     "sum(quantity)": "573.52" 
     }, 
     { 
     "state": "NY", 
     "zip": "12405", 
     "sum(quantity)": "911.70" 
     }, 
     { 
     "state": "NY", 
     "zip": "13606", 
     "sum(quantity)": "295.05" 
     }, 
     { 
     "state": "NY", 
     "zip": "14410", 
     "sum(quantity)": "91.27" 
     } 
    ] 
    }, 
    { 
    "key": "OH", 
    "values": [ 
     { 
     "state": "OH", 
     "zip": "43802", 
     "sum(quantity)": "234.60" 
     } 
    ] 
    }, 
    { 
    "key": "OK", 
    "values": [ 
     { 
     "state": "OK", 
     "zip": "73520", 
     "sum(quantity)": "331.16" 
     }, 
     { 
     "state": "OK", 
     "zip": "74330", 
     "sum(quantity)": "679.95" 
     }, 
     { 
     "state": "OK", 
     "zip": "74720", 
     "sum(quantity)": "723.63" 
     }, 
     { 
     "state": "OK", 
     "zip": "74821", 
     "sum(quantity)": "624.22" 
     } 
    ] 
    }, 
    { 
    "key": "OR", 
    "values": [ 
     { 
     "state": "OR", 
     "zip": "97810", 
     "sum(quantity)": "229.12" 
     } 
    ] 
    }, 
    { 
    "key": "PA", 
    "values": [ 
     { 
     "state": "PA", 
     "zip": "15410", 
     "sum(quantity)": "558.51" 
     }, 
     { 
     "state": "PA", 
     "zip": "15520", 
     "sum(quantity)": "859.19" 
     }, 
     { 
     "state": "PA", 
     "zip": "15610", 
     "sum(quantity)": "656.57" 
     }, 
     { 
     "state": "PA", 
     "zip": "15611", 
     "sum(quantity)": "303.19" 
     }, 
     { 
     "state": "PA", 
     "zip": "16820", 
     "sum(quantity)": "763.54" 
     }, 
     { 
     "state": "PA", 
     "zip": "17301", 
     "sum(quantity)": "314.21" 
     }, 
     { 
     "state": "PA", 
     "zip": "18010", 
     "sum(quantity)": "522.25" 
     }, 
     { 
     "state": "PA", 
     "zip": "19001", 
     "sum(quantity)": "541.86" 
     }, 
     { 
     "state": "PA", 
     "zip": "19501", 
     "sum(quantity)": "314.65" 
     } 
    ] 
    }, 
    { 
    "key": "SC", 
    "values": [ 
     { 
     "state": "SC", 
     "zip": "29426", 
     "sum(quantity)": "387.74" 
     } 
    ] 
    }, 
    { 
    "key": "TX", 
    "values": [ 
     { 
     "state": "TX", 
     "zip": "77326", 
     "sum(quantity)": "497.49" 
     }, 
     { 
     "state": "TX", 
     "zip": "79311", 
     "sum(quantity)": "619.80" 
     }, 
     { 
     "state": "TX", 
     "zip": "79699", 
     "sum(quantity)": "546.51" 
     }, 
     { 
     "state": "TX", 
     "zip": "79713", 
     "sum(quantity)": "424.77" 
     } 
    ] 
    }, 
    { 
    "key": "VA", 
    "values": [ 
     { 
     "state": "VA", 
     "zip": "23001", 
     "sum(quantity)": "340.39" 
     }, 
     { 
     "state": "VA", 
     "zip": "23301", 
     "sum(quantity)": "446.56" 
     } 
    ] 
    }, 
    { 
    "key": "VT", 
    "values": [ 
     { 
     "state": "VT", 
     "zip": "5640", 
     "sum(quantity)": "548.90" 
     } 
    ] 
    }, 
    { 
    "key": "WA", 
    "values": [ 
     { 
     "state": "WA", 
     "zip": "98520", 
     "sum(quantity)": "223.90" 
     } 
    ] 
    }, 
    { 
    "key": "WI", 
    "values": [ 
     { 
     "state": "WI", 
     "zip": "54101", 
     "sum(quantity)": "680.80" 
     }, 
     { 
     "state": "WI", 
     "zip": "54405", 
     "sum(quantity)": "485.17" 
     } 
    ] 
    }, 
    { 
    "key": "WV", 
    "values": [ 
     { 
     "state": "WV", 
     "zip": "25606", 
     "sum(quantity)": "404.94" 
     } 
    ] 
    } 
]

這裏key應該作爲x軸。並且values應該充當y軸（sum(quantity)）。並且值內的對象應該形成一個堆棧條。

例如：CA密鑰中有兩個對象，它們是values鍵，它應該形成一個包含兩個堆棧的欄。希望你得到它。

我不是故意避開代碼。我沒有這個結構。我甚至無法知道我如何使用這些數據。我通過使用D3的巢穴得到了這個。

請幫忙。

來源

2016-03-08 Thomas Sebastian

我必須自己做，因爲我沒有選擇（我的同事幫助我一如既往地幫助我）。發佈下面的代碼片段。這裏也是鏈接到codepen。誰知道，未來可能會節省一些人的時間和精力。這是代碼。

var WIDTH = 1250, 
    HEIGHT = 500, 
    MARGINS = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 50 
    }, 
    xoffset = 22, 
    svg = [], 
    tooltip = []; 

function appendResponsiveSvg() { 
    svg = d3.select("svg") 
    .attr("width", 100 + "%") 
    .attr("height", 100 + "%") 
    .attr("preserveAspectRatio", "xMinYMin meet") 
    .attr("viewBox", "-80 -10 " + (WIDTH + 200) + " " + (HEIGHT + 100)) 
    .classed("svg-content-responsive", true); 

    return svg; 
} 

var verticalStackedData = multiLineData; 
console.log(verticalStackedData); 

function plotVerticallyStacked(data) { 

    var x = d3.scale.ordinal() 
    .rangeRoundBands([0, WIDTH], .1); 

    var y = d3.scale.linear() 
    .rangeRound([HEIGHT, 0]); 

    // Color range - add your favorites here 
    var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".2s")); 

    appendResponsiveSvg(); 

    svg.append("g") 
    .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")"); 

    var domain = ["sum(quantity)"]; 

    data.forEach(function(_data) { 
    var y0 = 0; 
    _data.groupedItem = []; 
    _data.values.map(function(d, index) { 
     _data.groupedItem.push(domain.map(function(name) { 
     return { 
      label: "quantity" + (index + 1), 
      name: name, 
      y0: y0, 
      y1: y0 += +d[name] 
     }; 
     })[0]); 
     _data.total = _data.groupedItem[_data.groupedItem.length - 1].y1; 
    }); 

    }); 

    data.sort(function(a, b) { 
    return b.total - a.total; 
    }); 

    x.domain(data.map(function(d) { 
    return d.values[0]["sum(quantity)"]; 
    })); 
    y.domain([0, d3.max(data, function(d) { 
    return d.total; 
    })]); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + HEIGHT + ")") 
    .call(xAxis); 

    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

    var state = svg.selectAll(".state") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "g") 
    .attr("transform", function(d) { 
     return "translate(" + x((d.values[0])["sum(quantity)"]) + ",0)"; 
    }); 

    state.selectAll("rect") 
    .data(function(d) { 
     return d.groupedItem; 
    }) 
    .enter().append("rect") 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
     return y(d.y1); 
    }) 
    .attr("height", function(d) { 
     return y(d.y0) - y(d.y1); 
    }) 
    .style("fill", function(d) { 
     return color(d.label); 
    }); 
} 
plotVerticallyStacked(verticalStackedData);

來源

2016-03-08 18:36:41

關於D3堆疊條形圖結構

回答

相關問題