Question

我对底部的代码有一个非常简单的问题。

我附加了文本元素来编写Graph Title和Axis Title。但是，当我使用

时

selectAll("text").append("text")代码没有用，但是当我写完

时

.append("text") The Code Simply WHY？

我认为这是因为我曾经使用selectAll为我的xAxis选择了文本，所以这允许我在未来的代码中附加。

<!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>

Answer 1

当你致电selectAll("text").append("text")时，你真的在说，

＆＃34;选择所有文本元素，并为每个文本元素添加一个新的文本元素作为其子元素＆＃34;

文本元素不能包含子元素。

查看此fiddle以获取相关证据。

在代码的最后一行，您调用的svg.append("text")确实有效，因为它将文本元素附加到svg文档，而不是另一个文本元素。希望有所帮助。

Answer 2

不要使用svg.selectAll("text")，请尝试svg.selectall("g.text")。基本上，这会创建一个g元素，svg text是一个孩子。

selectAll（）和append（）文本元素

2 个答案: