Javascript 使用D3.js在rect上显示文本
我正在使用d3.js开发标准化的堆叠条形图,并尝试在rect上追加一个文本。当我在浏览器中检查时,它会被追加。但它不可见。我想要这样的东西 这是我的密码Javascript 使用D3.js在rect上显示文本,javascript,css,d3.js,Javascript,Css,D3.js,我正在使用d3.js开发标准化的堆叠条形图,并尝试在rect上追加一个文本。当我在浏览器中检查时,它会被追加。但它不可见。我想要这样的东西 这是我的密码 var margin = {top: 20, right: 100, bottom: 30, left: 40}, width = 400 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; var x = d3.scale.ordi
var margin = {top: 20, right: 100, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .11);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#404041", "#00adef", "#bbbdc0", "#d1d2d4", "#d3d3d3"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format("10"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + 20)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("Nstackedbardata.json", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) {return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
});
data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
x.domain(data.map(function(d) { return d.State; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("fill", "#bbbdc0")
.append("text")
.attr("class","barChartAxisValue");
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split(' ');
el.text('');
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
tspan.attr('x', 0).attr('dy', '12');
}
};
svg.selectAll('g.x.axis g text').each(insertLinebreaks);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.style("fill", "#bbbdc0")
.append("text")
.attr("class","barChartAxisValue")
.attr("transform", "rotate(-90)")
.attr("x",-70)
.attr("y", -15)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Percentage");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
var sandeep= state.selectAll("rect")
.data(function(d) { return d.ages; })
.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); })
.style("fill", function(d) { return color(d.name);})
.append("text")
.attr("fill","#fff")
.style("stroke-width", 1)
.style({"font-size":"18px","z-index":"999999999"})
.style("text-anchor", "middle")
.text(function(d) { return ((d.y1-d.y0)*100).toFixed(0);});
});
var margin={top:20,right:100,bottom:30,left:40},
宽度=400-margin.left-margin.right,
高度=200-margin.top-margin.bottom;
var x=d3.scale.ordinal()
.rangeRoundBands([0,宽度],.11);
变量y=d3.scale.linear()
.rangeRound([高度,0]);
var color=d3.scale.ordinal()
.范围([“404041”、“00adef”、“bbbdc0”、“d1d2d4”、“D3D3”);
var xAxis=d3.svg.axis()
.比例(x)
.东方(“底部”);
var yAxis=d3.svg.axis()
.比例(y)
.东方(“左”)
.tick格式(d3格式(“10”));
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+页边距.顶部+页边距.底部+20)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
d3.json(“Nstackedbardata.json”),函数(错误,数据){
域(d3.keys(数据[0]).filter(函数(键){returnkey!==“State”});
data.forEach(函数(d){
var y0=0;
d、 ages=color.domain().map(函数(名称){return{name:name,y0:y0,y1:y0+=+d[name]};});
d、 forEach(函数(d){d.y0/=y0;d.y1/=y0;});
});
sort(函数(a,b){返回b.ages[0].y1-a.ages[0].y1;});
x、 域(data.map(函数(d){返回d.State;}));
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis)
.样式(“填充”、“bbbdc0”)
.append(“文本”)
.attr(“类”、“barChartAxisValue”);
var insertLinebreaks=函数(d){
var el=d3。选择(此项);
变量词=d.分割(“”);
el.文本(“”);
for(var i=0;i0)
tspan.attr('x',0).attr('dy','12');
}
};
svg.selectAll('g.x.axis g text')。每个(插入换行符);
svg.append(“g”)
.attr(“类”、“y轴”)
.呼叫(yAxis)
.样式(“填充”、“bbbdc0”)
.append(“文本”)
.attr(“类”、“barChartAxisValue”)
.attr(“变换”、“旋转(-90)”)
.attr(“x”,-70)
.attr(“y”,-15)
.attr(“dy”,“.71em”)
.style(“文本锚定”、“中间”)
.文本(“百分比”);
var state=svg.selectAll(“.state”)
.数据(数据)
.enter().append(“g”)
.attr(“类别”、“状态”)
.attr(“transform”,函数(d){return”translate(“+x(d.State)+”,0)”;});
var sandeep=state.selectAll(“rect”)
.data(函数(d){返回d.age;})
.enter().append(“rect”)
.attr(“宽度”,x.rangeBand())
.attr(“y”,函数(d){返回y(d.y1);})
.attr(“高度”,函数(d){返回y(d.y0)-y(d.y1);})
.style(“fill”,函数(d){返回颜色(d.name);})
.append(“文本”)
.attr(“填充”、“fff”)
.style(“笔划宽度”,1)
.style({“字体大小”:“18px”,“z索引”:“99999999”})
.style(“文本锚定”、“中间”)
.text(函数(d){return((d.y1-d.y0)*100).toFixed(0);});
});
您不能将文本
元素附加到rect
元素
相反,您应该将它们作为父级g
的单独子级保存:
var sandeep= state.selectAll(".data")
.data(function(d) { return d.ages; })
.enter();
sandeep.append("rect")
.classed('data', true)
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name);});
sandeep
.append("text")
.classed('data', true)
.attr("y", function(d) { return (y(d.y1) + y(d.y0)) / 2; }) // Center text
.attr("fill","#fff")
.style("stroke-width", 1)
.style({"font-size":"18px","z-index":"999999999"})
.style("text-anchor", "middle")
.text(function(d) { return ((d.y1-d.y0)*100).toFixed(0);});
我也面临同样的问题。我试过你的解决方案,但它不起作用。知道我哪里出错了吗