我正在d3.js创建一个垂直堆栈条形图。我的酒吧即将到来，但高度太大了。我认为这是由于错误的缩放。
我的图表代码是：
var localfinaldata = [];
var seriesData = "";
var xaxis = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
xaxis.push(data[i][j].orgunitname);
}
}
xaxis = $.unique(xaxis);
for (var i = 0; i < data.length; i++) {
var itemupdated = {};
var localdata = [];
for (var j = 0; j < data[i].length; j++) {
var item = {};
item["orgunitname"] = data[i][j].orgunitname;
item["count"] = data[i][j].HeadCount;
localdata.push(item);
}
var flag = 0;
for (var k = 0; k < xaxis.length; k++) {
for (var l = 0; l < localdata.length; l++) {
if (xaxis[k] == localdata[l].orgunitname) {
flag = 1;
break;
}
else {
flag = 0;
}
}
if (flag == 0) {
var item = {};
item["orgunitname"] = xaxis[k];
item["count"] = 0;
localdata.push(item);
}
}
// Call Sort By Name
localdata.sort(SortByOrgunitName);
itemupdated["datas"] = localdata;
itemupdated["name"] = data[i][0].contype;
localfinaldata.push(itemupdated);
}
var margins = {
top: 10,
left: 1,
right: 24,
bottom: 5
},
legendPanel = {
width: 241
};
var w = $('#contactChart').width();
var h = $('#contactChart').height();
var margin = { top: 20, right: 5, bottom: 30, left: 10 },
width = w - margins.left - margins.right - legendPanel.width,
height = 280 - margins.top - margins.bottom;
var padding = { top: 40, right: 40, bottom: 40, left: 40 };
var color = d3.scale.ordinal()
.range(["#00aba9", "#da532c", "#B22222", "#228B22", "#FF00FF", "#1E90FF", "#D2691E"]);
$("#contactChart").html("");
var series = localfinaldata.map(function (d) {
return d.name;
}),
localfinaldata = localfinaldata.map(function (d) {
return d.datas.map(function (o, i) {
return {
y: o.count,
x: o.orgunitname
};
});
}),
stack = d3.layout.stack();
stack(localfinaldata);
var localfinaldata = localfinaldata.map(function (group) {
return group.map(function (d) {
// Invert the x and y values, and y0 becomes x0
return {
x: d.x,
y: d.y,
y0: d.y0
};
});
}),
svg = d3.select('#contactChart')
.append('svg')
.attr('width', width + margins.left + margins.right + legendPanel.width)
.attr('height', height + margins.top + margins.bottom)
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
yMax = d3.max(localfinaldata, function (group) {
return d3.max(group, function (d) {
return d.y + d.y0;
});
}),
yScale = d3.scale.linear()
.domain([0, yMax])
.range([height, 0]),
orgunitname = localfinaldata[0].map(function (d) {
// return d.y;
return d.x;
}),
xScale = d3.scale.ordinal()
.domain(orgunitname)
.rangeRoundBands([0, width], .1),
xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom'),
yAxis = d3.svg.axis()
.scale(yScale)
.orient('left'),
groups = svg.selectAll('g')
.data(localfinaldata)
.enter()
.append('g')
.style('fill', function (d, i) {
return color(series[i]);
}),
rects = groups.selectAll('rect')
.data(function (d) {
return d;
})
.enter()
.append('rect')
.attr('y', function (d, i) {
//return yScale(d.y);
return yScale(d.y);
})
.attr('x', function (d,i) {
// return xScale(d.x0) + 135;
return xScale(d.x);
})
.attr('height', function (d) {
//return yScale.rangeBand();
return Math.abs(yScale(d.y)-yScale(d.y0));
})
.attr('width', function (d) {
// return xScale(d.x);
return xScale.rangeBand();
});
groups.selectAll('text.label')
.data(function (d) {
return d;
})
.enter()
.append("text")
.text(function (d) {
if (d.y == 0) {
return null;
}
else {
return d.y
}
})
.attr("class", "text")
.attr("x", function (d) {
return xScale(d.x) + xScale.rangeBand() / 2;
})
.attr("y", function (d) { //return yScale(d.y) + yScale.rangeBand() / 2;
return yScale(d.y0) + yScale(d.y);
})
.attr("dy", "0.5em")
.attr("dx", "0.5em")
.attr("fill", "white")
.style("font", "bold 12px Arial")
.style("text-anchor", "end")
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + height + ',0)')
.call(yAxis)
.selectAll("text")
.attr("x", "10em")
.attr("y", "0em")
.style("text-anchor", "end")
.attr("font-family", "Arial")
.attr("font-size", "13px");
$('.axis path').css("fill", "none");
series.forEach(function (s, i) {
svg.append('rect')
.attr('fill', color(series[i]))
.attr('width', 20)
.attr('height', 20)
.attr('x', width + margins.left + 160)
.attr('y', i * 24 + 150);
svg.append('text')
.attr('fill', 'black')
.attr("font-size", "11")
.attr('x', width + margins.left + 181)
.attr('y', i * 24 + 164)
.text(s);
});
数据格式为：
data = [{
datas:[{
orgunitname: 'ABCD',
count: 1
}, {
orgunitname: 'XYZ',
count: 6
},
{
orgunitname: 'XYZ',
count: 0
}],
names: 'Local'
},
{
datas:[ {
orgunitname: 'ABCD',
count: 7
}, {
orgunitname: 'XYZ',
count: 8
},
{
orgunitname: 'mno',
count: 7
},],
names: 'Temporary '
}
]