我有一个 d3 条形图,它根据日期按天顺序列出数据。这很好用,但现在我需要每天显示两组数据,以分组条形图格式或只是并排条形图。
我认为这需要进行一些重构,但在愚弄它并引用了我在网上找到的一堆示例之后,图表使用时间刻度和线性刻度这一事实给我带来了麻烦对此的理解。我希望有人能帮助我告诉我如何让这张图表在图表中每天显示 2 个柱。
我当前的 x 轴设置:
var xTimeScale = d3.time.scale().
domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.range([0, width]);
var xScale = d3.scale.linear()
.domain([0, data.length])
.range([0, width]);
我的 fiddle :http://jsfiddle.net/MmEjF/45/
因此,对于两组不同的数据,我每天需要 2 个柱状图 - 每个柱状图代表每个数据集中的一个值。我怎样才能完成显示分组的条形图?如果将数据集合并为一个会更好吗?
最佳答案
首先,让我们考虑两组数据的两个独立图表。天平是一样的。它看起来像这样:
好的。这一切都很好,但我们如何从那里得到堆积图?
好吧,我们需要确保每个报价单都有两条数据。
然后,在绘制每个刻度时,它应该从 0 开始绘制第一条数据,第二条数据不应从 0 开始绘制,而是根据第一个数据的量进行偏移。
考虑到这一点,其他部分就位:y 轴必须从 0 到两个数据的总和的最大值。
var data = [{"year":2013,"month":3,"day":5,"count1":18, "count2":3},
{"year":2013,"month":3,"day":6,"count1":3, "count2":11},
{"year":2013,"month":3,"day":7,"count1":10,"count2": 8},
{"year":2013,"month":3,"day":8,"count1":18, "count2": 4}];
var maxValue = d3.max(data, function (d) {
return d.count1 + d.count2;
});
var yScale = d3.scale.linear()
.domain([0, maxValue])
.range([0, height]);
现在,更容易将每组条形图视为一个组,并将条形图添加到该组中:
var bars = svg.selectAll(".bar")
.data(data).enter()
.append("g")
.attr("class","bar")
.attr("transform", function(d){
return "translate("+xTimeScale(d.date)+",0)"
});
var count1Bars = bars.append("rect")
.attr("class", "count1")
.attr("height", function(d){return yScale(d.count1)})
.attr("y", function(d){return height - yScale(d.count1)})
.attr("width", barWidth);
var count2Bars = bars.append("rect")
.attr("class", "count2")
.attr("height", function(d){return yScale(d.count2)})
.attr("y", function(d){return height - yScale(d.count1) -yScale(d.count2)})
.attr("width", barWidth);
var count1text = bars.append("text")
.text(function(d){return d.count1})
.attr("y", function(d){return height})
.attr("x", barWidth / 2);
var count2text = bars.append("text")
.text(function(d){return d.count2})
.attr("y", function(d){return height - yScale(d.count1)})
.attr("x", barWidth / 2);
现在,这只是一个粗略的示例,可以帮助您上手:http://jsfiddle.net/MmEjF/49/
祝你好运!只要想想你需要什么,事情往往会从那里落到实处!
关于javascript - d3 将条形图转换为分组条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16553047/