D3 条形图到堆积条形图
D3 bar chart to stacked bar chart
大家好,我是 D3 的新手,我正在尝试将普通条形图转换为堆积条形图。
这是我的代码
var data = [4, 8, 15, 16, 23, 42, 200];
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("background", "grey")
.selectAll('rect')
.data(data)
.enter().append('rect').
style("fill", "blue")
.attr("width", barWidth)
.attr("height", function(d){ return d;})
.attr('x', function(d, i)
{ return i *(barWidth + barOffset);})
.attr('y', function(d){
return height - d;
});
任何正确方向的帮助或提示都将不胜感激。
这里数据起着重要的作用。
需要修改数据,兼容图表类型
这是您问题的解决方案。
希望,这一定会对你有所帮助。谢谢:)
var data = [4, 8, 15, 16, 23, 42, 200];
data = data.map(function(d) { return [{x: 0, y: d}] });
var stack = d3.layout.stack();
var stackData = stack(data);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data.map(function(d,i){return i;}));
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var lastData = stackData[stackData.length-1][0]; //to get the max value
var y = d3.scale.linear()
.rangeRound([height, 0]).domain([0, lastData.y+lastData.y0]);
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("fill", "grey")
.selectAll('rect')
.data(stack(data))
.enter().append('rect').
style("fill", function(d,i) {
return color(i);
})
.attr("width", barWidth)
.attr('x', 0)
.attr("y", function(d) {
return y(d[0].y0+d[0].y);
})
.attr("height", function(d) {
return height - y(d[0].y);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>
是的!!理想的堆叠条形图必须需要 2D 数组
以下几个场景可以让您清楚地理解
场景一-
我们需要可视化 MAC(仅一种产品)5 年的销售额
则数据为:销售额:[$2000, $5555, $20177, $9999, $80805]
所以这里我们需要一个简单的条形图,其中每个条形图将显示相应年份的销售额
senario 2 -
我们需要可视化 3 种产品(MAC、iPad、iPhone)5 年的销售额
那么数据将是:
MAC 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
iPad 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
iPhone 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
这里我们需要堆叠条形图,其中每个堆叠将显示相应年份的 3 种产品的销售额
如果我们有多个数组那么.. 除了上面的代码我们还需要 x scale
你可以关注exapmle
希望这会有所帮助 :) 谢谢 :)
只是对以上答案的评论..
这是代码 -
var data = [
[4, 8, 15, 16, 23, 42, 200],
[50, 60, 20, 100, 30, 50, 40]
];
//console.log(data)
//console.log("REMAP---------------------------");
var remapped =data[0].map(function(dat,i){
return data.map(function(d,ii){
return {x: ii, y: d[i] };
})
});
var w = 200,
h = 200
// create canvas
var svg = d3.select(".chart").append("svg:svg")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(0,"+h+")");
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.5)
var y = d3.scale.linear().range([0, h])
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data[0].map(function(d,i){return i;}));
//console.log("LAYOUT---------------------------");
var stacked = d3.layout.stack()(remapped)
//console.log(stacked)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
// show the domains of the scales
console.log("x.domain(): " + x.domain())
console.log("y.domain(): " + y.domain())
// Add a group for each column.
var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return color(i); })
.style("stroke", function(d, i) { return d3.rgb(color(i)).darker(); });
// Add a rect for each date.
var rect = valgroup.selectAll("rect")
.data(function(d){return d;})
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>
大家好,我是 D3 的新手,我正在尝试将普通条形图转换为堆积条形图。
这是我的代码
var data = [4, 8, 15, 16, 23, 42, 200];
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("background", "grey")
.selectAll('rect')
.data(data)
.enter().append('rect').
style("fill", "blue")
.attr("width", barWidth)
.attr("height", function(d){ return d;})
.attr('x', function(d, i)
{ return i *(barWidth + barOffset);})
.attr('y', function(d){
return height - d;
});
任何正确方向的帮助或提示都将不胜感激。
这里数据起着重要的作用。 需要修改数据,兼容图表类型
这是您问题的解决方案。
希望,这一定会对你有所帮助。谢谢:)
var data = [4, 8, 15, 16, 23, 42, 200];
data = data.map(function(d) { return [{x: 0, y: d}] });
var stack = d3.layout.stack();
var stackData = stack(data);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data.map(function(d,i){return i;}));
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var lastData = stackData[stackData.length-1][0]; //to get the max value
var y = d3.scale.linear()
.rangeRound([height, 0]).domain([0, lastData.y+lastData.y0]);
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("fill", "grey")
.selectAll('rect')
.data(stack(data))
.enter().append('rect').
style("fill", function(d,i) {
return color(i);
})
.attr("width", barWidth)
.attr('x', 0)
.attr("y", function(d) {
return y(d[0].y0+d[0].y);
})
.attr("height", function(d) {
return height - y(d[0].y);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>
是的!!理想的堆叠条形图必须需要 2D 数组
以下几个场景可以让您清楚地理解
场景一-
我们需要可视化 MAC(仅一种产品)5 年的销售额
则数据为:销售额:[$2000, $5555, $20177, $9999, $80805]
所以这里我们需要一个简单的条形图,其中每个条形图将显示相应年份的销售额
senario 2 -
我们需要可视化 3 种产品(MAC、iPad、iPhone)5 年的销售额 那么数据将是:
MAC 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
iPad 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
iPhone 的销售额:[2000 美元、5555 美元、20177 美元、9999 美元、80805 美元]
这里我们需要堆叠条形图,其中每个堆叠将显示相应年份的 3 种产品的销售额
如果我们有多个数组那么.. 除了上面的代码我们还需要 x scale
你可以关注exapmle
希望这会有所帮助 :) 谢谢 :)
只是对以上答案的评论..
这是代码 -
var data = [
[4, 8, 15, 16, 23, 42, 200],
[50, 60, 20, 100, 30, 50, 40]
];
//console.log(data)
//console.log("REMAP---------------------------");
var remapped =data[0].map(function(dat,i){
return data.map(function(d,ii){
return {x: ii, y: d[i] };
})
});
var w = 200,
h = 200
// create canvas
var svg = d3.select(".chart").append("svg:svg")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(0,"+h+")");
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.5)
var y = d3.scale.linear().range([0, h])
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data[0].map(function(d,i){return i;}));
//console.log("LAYOUT---------------------------");
var stacked = d3.layout.stack()(remapped)
//console.log(stacked)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
// show the domains of the scales
console.log("x.domain(): " + x.domain())
console.log("y.domain(): " + y.domain())
// Add a group for each column.
var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return color(i); })
.style("stroke", function(d, i) { return d3.rgb(color(i)).darker(); });
// Add a rect for each date.
var rect = valgroup.selectAll("rect")
.data(function(d){return d;})
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>