问题描述
我正在尝试在d3.js中为条形图制作一个单数列，其目的是在程序中条形化其他折线图的系数。 我熟悉当数据为.csv格式时如何制作它们，但是在这种情况下，我现在正尝试通过三个变量进行制作。 这三个变量是：
var xtwo;
var xone;
var xzero;
在后面的部分中将包含值。 我根据我所知道和所见的知识构建了一个骨架，就在这里：
//Bar Graph
var barmargin = {
top: 20,
right: 20,
bottom: 30,
left: 60
},
barwidth = 500 - barmargin.left - barmargin.right,
barheight = 350 - barmargin.top - barmargin.bottom;
//X scale
var barx = d3.scale.ordinal()
.rangeRoundBands([0, barwidth], .1);
//Y scale
var bary = d3.scale.linear()
.rangeRound([barheight, 0]);
//bar graph colors
var color = d3.scale.ordinal()
.range(["#FF5C33", "#F48C00", "#FFFF5C"]);
// Use X scale to set a bottom axis
var barxAxis = d3.svg.axis()
.scale(barx)
.orient("bottom");
// Same for y
var baryAxis = d3.svg.axis()
.scale(bary)
.orient("left")
.tickFormat(d3.format(".2s"));
// Addchart to the #chart div
var svg = d3.select("#chart").append("svg")
.attr("width", barwidth + barmargin.left + barmargin.right)
.attr("height", barheight + barmargin.top + barmargin.bottom)
.append("g")
.attr("transform", "translate(" + barmargin.left + "," + barmargin.top + ")");
//Where data sorting happens normally
var bardata.data([xzero, xone, xtwo]);
//Y domain is from zero to 5
y.domain([0, 5]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + barheight + ")")
.call(barxAxis);
svg.append("g")
.attr("class", "y axis")
.call(baryAxis);
bardata.selectAll("rect")
.data(function(d) {
return d.types;
})
.enter().append("rect")
.attr("width", barx.rangeBand())
.attr("y", function(d) {
return bary(d.y1);
})
.attr("height", function(d) {
return bary(d.y0) - bary(d.y1);
})
.style("fill", function(d) {
return color(d.name);
});
但我真的无法弄清楚如何使其正常工作。 我以为可以手动制作.data，但似乎无法正常工作。
如有必要， 完整代码： ：
1楼
Godwhacker
3
已采纳
2015-07-31 16:57:40
广义上讲：您想使用三个不同的值创建三个相互重叠的条形图。 这三个值足以缩放条形图，但它们本身不足以放置条形图-每个条形图都需要偏移之前的条形图的大小。
d3只能读取发送给它的数据中已经存在的值，因为每个数据都绑定到一个单独的元素，因此您无法真正访问之前的值。 因此，您需要做的是创建一些新数据，其中包含显示它所需的所有数字。
这是您可以执行此操作的一种方法：
var canvas = d3.select("#canvas").append("svg").attr({width: 400, height: 400})
var values = [50, 90, 30]
var colours = ['#FA0', '#0AF', '#AF0']
var data = []
var yOffset = 0
//Process the data
for(var i = 0; i < values.length; i++) {
var datum = {
value : values[i],
colour : colours[i],
x: 0,
y: yOffset
}
yOffset += values[i]
data.push(datum)
}
var bars = canvas.selectAll('rect').data(data)
bars
.enter()
.append('rect')
.attr({
width : 30,
height : function(d) {
return d.value
},
y : function(d) {
return d.y //
}
})
.style({
fill : function(d) {
return d.colour
}
})
d3的布局功能都或多或少地做到了这一点-您向它们传递了一组数据，并且它们返回了包含SVG绘图指令所需值的新数据。