Javascript D3.JS在添加标题后丢失条形图文本

这是我的图表的完整代码

var数据集=[42.7,42.7,43.51]；
var宽度=400；	
var高度=400；	
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var xAxisWidth=300；
var yAxisWidth=300；
var xScale=d3.scale.ordinal（）
.域名（[“猛禽”、“对手”、“联盟平均值”]）
.rangeRoundBands（[0，xAxisWidth]，0.5）；
var yScale=d3.scale.linear（）
.domain（[40,45]）
//.domain（[80，d3.max（数据集）]）
.范围（[0，宽度]）；			
var padding={top:30，right:30，bottom:30，left:30}；
var title=“总反弹”；
svg.append（“g”）
.append（“文本”）
.正文（标题）
.attr（“类别”、“头衔”）
.attr（“x”，宽度/4）
.attr（“y”，padding.top）；
var rect=svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“填充”、“钢蓝”）
.attr（“x”，函数（d，i）{
返回padding.left++40+i*85；
})
.attr（“y”，函数（d）{
返回高度-填充。底部-Y刻度（d）；
})
.attr（“宽度”，50）
.attr（“高度”，函数（d）{
返回yScale（d）；
});
var text=svg.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“填充”、“白色”）
.attr（“字体大小”、“14px”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d，i）{
返回padding.left+40+i*85；
})
.attr（“y”，函数（d）{
返回高度-填充。底部-Y刻度（d）；
})
.attr（“dx”，xScale.rangeBand（）/2）
.attr（“dy”、“1em”）
.文本（功能（d）{
返回d；
});
var xAxis=d3.svg.axis（）
.scale（xScale）
.东方（“底部”）；
yScale.范围（[yAxisWidth，0]）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移”（“+padding.left+”，“+（height-padding.bottom）+”））
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移”（“+padding.left+”，“+（height-padding.bottom-yAxisWidth）+”）
.呼叫（yAxis）
。轴路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
移动将标题添加到脚本底部的代码部分将解决您的问题

首先附加标题会与您的条形图标签发生冲突。我的猜测是，这是因为您先添加
标题
文本，然后执行
svg。稍后选择all（'text'）
，这就是问题的原因

var dataset = [42.7, 42.7, 43.51];

var width = 400;
var height = 400;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xAxisWidth = 300;

var yAxisWidth = 300;

var xScale = d3.scale.ordinal()
  .domain(["Raptors", "Opponents", "League Average"])
  .rangeRoundBands([0, xAxisWidth], 0.5);

var yScale = d3.scale.linear()
  .domain([40, 45])
  //.domain([80,d3.max(dataset)])
  .range([0, yAxisWidth]);

var padding = {
  top: 30,
  right: 30,
  bottom: 30,
  left: 30
};

var rect = svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("x", function(d, i) {
    return padding.left + +40 + i * 85;
  })
  .attr("y", function(d) {
    return height - padding.bottom - yScale(d);
  })
  .attr("width", 50)
  .attr("height", function(d) {
    return yScale(d);
  });

var text = svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .attr("fill", "white")
  .attr("font-size", "14px")
  .attr("text-anchor", "middle")
  .attr("x", function(d, i) {
    return padding.left + 40 + i * 85;
  })
  .attr("y", function(d) {
    return height - padding.bottom - yScale(d);
  })
  .attr("dx", xScale.rangeBand() / 2)
  .attr("dy", "1em")
  .text(function(d) {
    return d;
  });

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");

yScale.range([yAxisWidth, 0]);

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) + ")")
  .call(yAxis);


var title = "Total Rebound";

svg.append("g")
  .append("text")
  .text(title)
  .attr("class", "title")
  .attr("x", width / 4)
  .attr("y", padding.top);

在这里检查JSFIDLE-
您可以在FIDLE中添加完整的代码吗？添加了完整的代码。谢谢如果你想了解发生了什么，请看一下S.O.Docs中的这个例子：非常感谢！我明白了！谢谢学习you@sparta93没有“冲突”。请参见我在问题注释处链接的示例。