javascript - D3.JS 添加标题后丢失条形图文本

Question

这是我的图表的完整代码

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 title = "Total Rebound";
    
svg.append("g")
    .append("text")
    .text(title)
    .attr("class", "title")
    .attr("x", width/4)
    .attr("y", padding.top);


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); 

.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

在 D3.js 中如果我画这样的条形图

当我想在其上方添加标题时 写完之后

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

图表变成并且条形的第一个数字丢失

如何解决这个问题？

Answer 1

将添加标题的代码部分移动到脚本底部将解决您的问题。

首先附加标题在某种程度上与您的栏标签相冲突。我的猜测是，这是因为您首先附加 title 文本，然后再执行 svg.selectAll('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);

在这里检查 jsfiddle - https://jsfiddle.net/3hwxfdxk/