堆积条形图标签-D3
Stacked Bar Chart Labels - D3
我正在尝试将数据标签添加到d3中的堆叠条形图中。
我希望数据标签在栏的中间。到目前为止,我刚刚学会了如何在每个栏的顶部添加数据标签。但实际上,我希望这些标签在每个酒吧的中间。
这是我的代码:
var width = 750,
height = 500;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#D70B16", "#154CEF", "#1A8A55"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orienta("left")
.tickFormat(d3.format(".2s"));
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "Value: " + (d.y1 - d.y0) + "";
})
var svgContainer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + 30 + "," + 30 + ")");
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "circle";
}));
data.forEach(function(d) {
var y0 = 0;
d.hours = color.domain().map(function(name) {
return {name: name, y0: y0, y1: y0 += +d[name]};
});
d3.select('body').append('pre')
.text(JSON.stringify(d.hours, null, ' '));
d.total = d.hours[d.hours.length - 1].y1;
});
x.domain(data.map(function(d) {return d.circle;}));
y.domain([0, d3.max(data, function(d) {return d.total;})])
svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svgContainer.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("Login Hours");
var circle = svgContainer.selectAll(".circle")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) {
return "translate(" + x(d.circle) + ",0)";
});
circle.selectAll("rect")
.data(function(d) { return d.hours; })
.enter()
.append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.on("mouseover", tip.show)
.on("mouseout", tip.hide)
.style("fill", function(d) { return color(d.name); });
circle.selectAll("text")
.data(function(d) { return d.hours; })
.enter()
.append("text")
.attr("x", 75)
.attr("y", function(d, i) { return y(d.y1) ; })
.style("text-anchor", "middle")
.text("test")
})
数据:
state,value1, value2, value3
state1, 80, 10, 20
state2, 90, 5, 10
state3, 70, 15, 35
state4, 90, 3, 27
state5, 50, 25, 55
state6, 85, 8, 27
实际上,我不知道如何得到X&每个条形图的Y坐标。
帮我把标签排列在每个小节的中间。
您只需要调整text
元素的y
坐标:
circle.selectAll("text")
.data(function(d) { return d.hours; })
.enter()
.append("text")
.attr("x", 75)
.attr("y", function(d, i) { return y(d.y1) + (y(d.y0) - y(d.y1))/2; })
.style("text-anchor", "middle")
.text("test")
相关文章:
- 仅当变量有值时才显示D3文本标签
- d3.js:如何为图上的散点添加标签
- D3带标签的箭头链接
- d3.js散点图中的刻度标签在Firefox 13.0.1中被截断
- 在D3散点图圆上添加标签
- D3在转换时退出多个系列折线图标签
- D3.js-单击节点后无法设置节点标签
- d3.js轴标签-颜色不变
- 将标签放在 d3.js 中节点的中心
- 如何在D3中获得可缩放Icicle布局中文本标签的旋转
- 在d3.js中添加文本标签以强制定向图链接
- 如何在D3.js基于力的标签布局图中获取公共子节点
- 章节文本标签没有't显示在D3.JS向下钻取饼图中
- 堆积条形图标签-D3
- 将鼠标悬停在切片上时更改d3.js饼图标签的颜色
- 强制图中一行上的 D3 标签
- D3堆积条形图添加数据标签并解决D3标签放置问题
- D3标签文本数量稍微偏离
- D3标签到可拖动的圆圈
- 添加d3标签不工作