使用JSON數據的D3堆疊圖表

我想創建一個像http://bl.ocks.org/mbostock/3886208這樣的堆積條形圖。但我不想使用CSV文件。使用JSON數據的D3堆疊圖表

如何通過使用JSON數據更改此示例？任何人都可以幫忙嗎？

2017-08-29 LI WEIJIE

你有沒有試過這個：http://www.convertcsv.com/csv-to-json.htm –

是的，我剛剛做到了。它不起作用.. –

你的問題有點含糊，但讓我們說我們把那個CSV文件，以JSON數據：

var data = [{ 
    "State": "VT", 
    "Under 5 Years": 32635, 
    "5 to 13 Years": 62538, 
    "14 to 17 Years": 33757, 
    "18 to 24 Years": 61679, 
    "25 to 44 Years": 155419, 
    "45 to 64 Years": 188593, 
    "65 Years and Over": 86649 
    }, { 
    "State": "VA", 
    "Under 5 Years": 522672, 
    "5 to 13 Years": 887525, 
    "14 to 17 Years": 413004, 
    "18 to 24 Years": 768475, 
    "25 to 44 Years": 2203286, 
    "45 to 64 Years": 2033550, 
    "65 Years and Over": 940577 
    }, 
    ...

那麼你就需要修復的預處理（領取鑰匙和總數）爲：

// fix pre-processing 
    var keys = []; 
    for (key in data[0]){ 
    if (key != "State") 
     keys.push(key); 
    } 
    data.forEach(function(d){ 
    d.total = 0; 
    keys.forEach(function(k){ 
     d.total += d[k]; 
    }) 
    });

然後例如其餘屬於地方：

<!DOCTYPE html> 
 
<style> 
 
    .axis .domain { 
 
    display: none; 
 
    } 
 
</style> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 
    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, 
 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    var x = d3.scaleBand() 
 
    .rangeRound([0, width]) 
 
    .paddingInner(0.05) 
 
    .align(0.1); 
 

 
    var y = d3.scaleLinear() 
 
    .rangeRound([height, 0]); 
 

 
    var z = d3.scaleOrdinal() 
 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 

 
    var data = [{ 
 
    "State": "VT", 
 
    "Under 5 Years": 32635, 
 
    "5 to 13 Years": 62538, 
 
    "14 to 17 Years": 33757, 
 
    "18 to 24 Years": 61679, 
 
    "25 to 44 Years": 155419, 
 
    "45 to 64 Years": 188593, 
 
    "65 Years and Over": 86649 
 
    }, { 
 
    "State": "VA", 
 
    "Under 5 Years": 522672, 
 
    "5 to 13 Years": 887525, 
 
    "14 to 17 Years": 413004, 
 
    "18 to 24 Years": 768475, 
 
    "25 to 44 Years": 2203286, 
 
    "45 to 64 Years": 2033550, 
 
    "65 Years and Over": 940577 
 
    }, { 
 
    "State": "WA", 
 
    "Under 5 Years": 433119, 
 
    "5 to 13 Years": 750274, 
 
    "14 to 17 Years": 357782, 
 
    "18 to 24 Years": 610378, 
 
    "25 to 44 Years": 1850983, 
 
    "45 to 64 Years": 1762811, 
 
    "65 Years and Over": 783877 
 
    }, { 
 
    "State": "WV", 
 
    "Under 5 Years": 105435, 
 
    "5 to 13 Years": 189649, 
 
    "14 to 17 Years": 91074, 
 
    "18 to 24 Years": 157989, 
 
    "25 to 44 Years": 470749, 
 
    "45 to 64 Years": 514505, 
 
    "65 Years and Over": 285067 
 
    }, { 
 
    "State": "WI", 
 
    "Under 5 Years": 362277, 
 
    "5 to 13 Years": 640286, 
 
    "14 to 17 Years": 311849, 
 
    "18 to 24 Years": 553914, 
 
    "25 to 44 Years": 1487457, 
 
    "45 to 64 Years": 1522038, 
 
    "65 Years and Over": 750146 
 
    }, { 
 
    "State": "WY", 
 
    "Under 5 Years": 38253, 
 
    "5 to 13 Years": 60890, 
 
    "14 to 17 Years": 29314, 
 
    "18 to 24 Years": 53980, 
 
    "25 to 44 Years": 137338, 
 
    "45 to 64 Years": 147279, 
 
    "65 Years and Over": 65614 
 
    }]; 
 

 
    // fix pre-processing 
 
    var keys = []; 
 
    for (key in data[0]){ 
 
    if (key != "State") 
 
     keys.push(key); 
 
    } 
 
    data.forEach(function(d){ 
 
    d.total = 0; 
 
    keys.forEach(function(k){ 
 
     d.total += d[k]; 
 
    }) 
 
    }); 
 

 
    data.sort(function(a, b) { 
 
    return b.total - a.total; 
 
    }); 
 
    x.domain(data.map(function(d) { 
 
    return d.State; 
 
    })); 
 
    y.domain([0, d3.max(data, function(d) { 
 
    return d.total; 
 
    })]).nice(); 
 
    z.domain(keys); 
 

 
    g.append("g") 
 
    .selectAll("g") 
 
    .data(d3.stack().keys(keys)(data)) 
 
    .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.State); 
 
    }) 
 
    .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") 
 
    .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("Population"); 
 

 
    var legend = g.append("g") 
 
    .attr("font-family", "sans-serif") 
 
    .attr("font-size", 10) 
 
    .attr("text-anchor", "end") 
 
    .selectAll("g") 
 
    .data(keys.slice().reverse()) 
 
    .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; 
 
    }); 
 
</script>

來源

2017-08-29 17:20:34 Mark

非常感謝你~~ –

使用JSON數據的D3堆疊圖表

回答

相關問題