d3.js-在条形图上方添加文本不显示_D3.js

d3.js-在条形图上方添加文本不显示

d3.js

d3.js-在条形图上方添加文本不显示,d3.js,D3.js,在学习了Excellent d3.js教程之后，我喜欢在每个条的顶部添加条值！下面的示例代码没有显示文本 XYZ.csv year,value 2011,45 2012,47 2013,52 2014,70 2015,75 2016,78 html文件： <!doctype html> <html> <head> <style> .bar { fill: steelblue; }

在学习了Excellent d3.js教程之后，我喜欢在每个条的顶部添加条值！下面的示例代码没有显示文本

XYZ.csv

year,value
2011,45
2012,47
2013,52
2014,70
2015,75
2016,78

html文件：

<!doctype html>
<html>
<head>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="500"></svg>
<script>
var svg = d3.select("svg"),
            margin = 200,
            width = svg.attr("width") - margin,
            height = svg.attr("height") - margin


var xScale = d3.scaleBand().range([0, width]).padding(0.4),
            yScale = d3.scaleLinear().range([height, 0]);

var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

    d3.csv("XYZ.csv", function(error, data) {
        if (error) {
            throw error;
        }

        xScale.domain(data.map(function(d) { return d.year; }));
        yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

        g.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(xScale));

        g.append("g")
         .call(d3.axisLeft(yScale).tickFormat(function(d){
             return "$" + d;
         }).ticks(10));

        g.selectAll(".bar")
         .data(data)
         .enter().append("rect")
         .attr("class", "bar")
         .attr("x", function(d) { return xScale(d.year); })
         .attr("y", function(d) { return yScale(d.value); })
         .attr("width", xScale.bandwidth())
         .attr("height", function(d) { return height - yScale(d.value); })
         .append("text")
         .attr("x", function(d) { return xScale(d.year); })
         .attr("y", function(d) { return yScale(d.value); })
         .attr("text", function(d) { return d.value; })
    });
</script>
</body>
</html>

不可能将

附加到

上。只需分别添加文本：

g.selectAll(".bar-title")
  .data(data)
  .enter()
  .append("text")
  .classed('bar-title', true)
  .attr('text-anchor', 'middle')
  .attr("x", d => xScale(d.year) + xScale.bandwidth()/2)
  .attr("y", d => yScale(d.value))
  .text(d => `$${d.value}`);

。。。或者，您可以在

enter（）

上追加

元素，然后在

下追加

和

const数据=[
{年份：2011年，价值：45}，
{年份：2012，价值：47}，
{年份：2013年，价值：52}，
{年份：2014年，价值：70}，
{年份：2015年，价值：75}，
{年份：2016年，价值：78}
];
var svg=d3。选择（“svg”），
保证金=200，
宽度=svg.attr（“宽度”）-边距，
高度=svg.attr（“高度”）-边距
var xScale=d3.scaleBand（）.range（[0，width]）。padding（0.4），
yScale=d3.scaleLinear（）.range（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“转换”（“+100+”，“+100+”））；
域（data.map（函数（d）{returnd.year；}））；
域（[0，d3.max（数据，函数（d）{返回d.value；}）]）；
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））；
g、 附加（“g”）
.call（d3.axisLeft（yScale）.tickFormat（函数（d）{
返回“$”+d；
}).蜱（10））；
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{return xScale（d.year）；}）
.attr（“y”，函数（d）{return yScale（d.value）；}）
.attr（“宽度”，xScale.bandwidth（））
.attr（“高度”，函数（d）{返回高度-yScale（d.value）；}）
g、 全选（“.bar title”）
.数据（数据）
.输入（）
.append（“文本”）
.classed（'bar-title'，true）
.attr（'text-anchor'，'middle'）
.attr（“x”，d=>xScale（d.year）+xScale.bandwidth（）/2）
.attr（“y”，d=>yScale（d.value）-5）
.text（d=>`$${d.value}`）
.bar{
填充：钢蓝；
}
.酒吧名称{
字体系列：“Ubuntu”；
}


g.selectAll(".bar-title")
  .data(data)
  .enter()
  .append("text")
  .classed('bar-title', true)
  .attr('text-anchor', 'middle')
  .attr("x", d => xScale(d.year) + xScale.bandwidth()/2)
  .attr("y", d => yScale(d.value))
  .text(d => `$${d.value}`);