selectAll（）和append（）文本元素

我有一個非常簡單的問題，關於底部的代碼。selectAll（）和append（）文本元素

我附加了文本元素來編寫圖形標題和軸標題。然而，當我用

selectAll("text").append("text")代碼沒有工作，但我只是寫了

.append("text")只簡單的工作爲什麼？

我認爲這是因爲我曾經爲我的xAxis選擇了使用selectAll的文本，所以這允許我在未來的代碼中添加。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Forecast</title> 
<script type="text/javascript" src="E:\project\d3\d3.js"></script> 
<script src="http://use.edgefonts.net/antic-slab.js"></script> 

<style> 
body 
    { font: 14px Arial;} 

path 
{ 
    stroke: steelblue; 
    stroke-width: 2; 
    fill:none; 
} 

.axis path, 
.axis line { 
     fill: none; 
     stroke: grey; 
     stroke-width: 1; 
     shape-rendering: crispEdges; 
}  

div.tooltip { 
position: absolute;   
    text-align: center;   
    width: 60px;     
    height: 28px;     
    padding: 2px;    
    font: 12px sans-serif;   
    background: lightsteelblue; 
    border: 0px;  
    border-radius: 8px;   
    pointer-events: none;  
} 



</style>   

</head> 

<body> 

<script type="text/javascript"> 


var margin = {top: 40, right: 30 , bottom: 100, left: 50}, 
h = 600 - margin.top - margin.bottom, 
w = 1300 - margin.left - margin.right;  

var xScale = d3.time.scale() 
      .range([0,w]); 

var yScale = d3.scale.linear() 
      .range([h,0]); 

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

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

/*For ToolTip*/ 
var formatTime = d3.time.format("%e %B"); 


var parseDate = d3.time.format("%d-%b-%y").parse;  

var svg = d3.select("body").append("svg") 
.attr("width",w + margin.left + margin.right) 
.attr("height",h + margin.top +margin.bottom) 
.append("g") 
.attr("transform", "translate("+margin.left+","+margin.top+")"); 

d3.tsv("forecast.tsv", function(error, data) { 
data.forEach(function(d) { 
d.date = parseDate(d.date) 
d.for = +d.for; 
d.act = +d.act;  
}); 

/* 
var dex = d3.extent(data,function(d) { return d.date;});   
var dmax = d3.max(data,function(d) { return d.close;});  
*/ 

xScale.domain(d3.extent(data,function(d) { return d.date;})); 
yScale.domain([5000,d3.max(data,function(d) { return Math.max(d.for, d.act);})]);  

var forecast = d3.svg.line() 
     .x(function(d) { return xScale(d.date);}) 
     .y(function(d) { return yScale(d.for);}) 
     .interpolate("linear"); 

var actual = d3.svg.line() 
     .x(function(d) { return xScale(d.date);}) 
     .y(function(d) { return yScale(d.act);}) 
     .interpolate("linear"); 


svg.append("path") 
.datum(data) 
.attr("d", forecast); 

svg.append("path") 
.datum(data) 
.attr("d", actual) 
.style("stroke","red");  

svg.append("g") 
.attr("transform", "translate(0,"+ h +")") 
.call(xAxis) 
.selectAll("text") 
.style("text-anchor", "end") 
.attr("dx", "-.8em") 
.attr("dy", ".15em") 
.attr("transform", function(d) { 
return "rotate(-65)" 
}); 


svg.append("g") 
.call(yAxis); 


/*Tooltip Code*/  


var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

svg.selectAll("dotfor")  
     .data(data)   
     .enter() 
     .append("circle")        
     .attr("r", 5)  
     .attr("cx", function(d) { return xScale(d.date); })  
     .attr("cy", function(d) { return yScale(d.for); })  
     .on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.for) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     });  
/*for Actual line*/  
svg.selectAll("dotact")  
     .data(data)   
     .enter() 
     .append("circle")        
     .attr("r", 5)  
     .attr("cx", function(d) { return xScale(d.date); })  
     .attr("cy", function(d) { return yScale(d.act); })  
     .on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.act) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     });  

svg.append("text") 
.attr("x", (w/2)) 
.attr("y", 550) 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
.style("font-weight","bold") 
.style("text-decoration", "underline") 
.text("Days"); 

svg.append("text") 
.attr("x", ((w/2)-80)) 
.attr("y",-10) 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
.style("font-weight","bold") 
.style("fill", "steelblue") 
.style("text-decoration", "underline") 
.text("Forecast Calls v/s"); 


svg.append("text") 
.attr("x", ((w/2)+35)) 
.attr("y",-10) 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
.style("font-weight","bold") 
.style("fill", "red") 
.style("text-decoration", "underline") 
.text("Actual Calls"); 



}); 

</script> 
</body> 
</html>

來源

2014-04-17 Shoaibkhanz