[英]Grouped Bar Chart From JSON D3.JS
得到了顯示的條形圖和預期的圖形,除了條形圖每個月彼此堆疊而不是散布在區域上。 他們只是每個月都互相覆蓋。
我的D3.keys(data)返回1,2,3,4,5而不是思想1-2015,1-2016等
同樣,一切都在正常進行,只是酒吧在本月的下一個月開始。 因此,每個月都會得到一堆互相覆蓋的酒吧,而不是彼此相鄰地分組?
UPDATE
我的數據並不總是統一的,事實證明這很困難。 幾個月后,結果就不會出現了,而不是“ Maple:0”。幾個月后,Maple根本就不會在那里。 因此,使此圖表具有任何顏色分組都是我無法做到的。
根據我提供的數據,我想制作一個分組的條形圖,如下所示: http://bl.ocks.org/mbostock/3887051 ,其中月份代替了州,並且每月內所有可能的材料都包含在月份中。 圖例需要將顏色編碼為與條相同的顏色,但是由於上述問題,我看不到此數據有可能。 我需要做的是檢查所有月份中所有可能的物料,然后在所有沒有物料的月份中插入0和該物料。 但是,如何使用D3做到這一點超出了我的范圍。
我真的希望D3示例可以有更多嵌套的JSON示例,這些示例都可以在非常簡單的CSV格式文件上運行,這些對實際示例沒有幫助!
我的代碼(JSON下面)
var margin = {top: 20, right: 20, bottom: 30, left: 40,},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = nestedData;
var months = d3.keys(data);
x0.domain(data.map(function(d) { return d.key; }));
x1.domain(months).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.values;}); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Boxes");
var month = svg.selectAll(".month")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; });
month.selectAll("rect")
.data(function(d) {return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.values); })
.attr("height", function(d) { return height - y(d.values); })
.style("fill", "red");
JSON數據
[
{
"key": "1-2015",
"values": [
{
"key": "MDF",
"values": 726
},
{
"key": "MAPLE PAINT GRADE",
"values": 1652
},
{
"key": "ALDER",
"values": 1922
},
{
"key": "MAPLE",
"values": 1206
},
{
"key": "ALDER - RUSTIC",
"values": 324
},
{
"key": "POPLAR-MDF",
"values": 19
},
{
"key": "POPLAR STAIN GRADE",
"values": 679
},
{
"key": "OAK",
"values": 12
}
]
},
{
"key": "4-2015",
"values": [
{
"key": "MAPLE",
"values": 1979
},
{
"key": "MAPLE PAINT GRADE",
"values": 1988
},
{
"key": "ALDER",
"values": 1746
},
{
"key": "MDF",
"values": 883
},
{
"key": "POPLAR STAIN GRADE",
"values": 639
},
{
"key": "OAK",
"values": 89
},
{
"key": "POPLAR-MDF",
"values": 24
},
{
"key": "ALDER - RUSTIC",
"values": 367
},
{
"key": "HICKORY",
"values": 1
},
{
"key": "WALNUT",
"values": 20
},
{
"key": "CHERRY",
"values": 0
}
]
},
{
"key": "2-2015",
"values": [
{
"key": "MAPLE PAINT GRADE",
"values": 1758
},
{
"key": "ALDER",
"values": 1551
},
{
"key": "ALDER - RUSTIC",
"values": 339
},
{
"key": "MDF",
"values": 727
},
{
"key": "MAPLE",
"values": 1712
},
{
"key": "POPLAR STAIN GRADE",
"values": 434
},
{
"key": "POPLAR-MDF",
"values": 16
},
{
"key": "OAK",
"values": 12
}
]
}
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.