CODEWITHSUNDEEP
d3.js
Shoaibkhanz
Shoaibkhanz

Reputation: 2082

selectAll() and append() text element

I have a very simple question regarding the code right at the bottom.

I have appended text element to write the Graph Title and Axis Title. However, when i used

selectAll("text").append("text") the code did not work but when I simply wrote

.append("text") The Code Simply worked WHY?

I think it is because I have once selected text using selectAll for my xAxis, so does this allow me to append in the future code.

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

Upvotes: 1

Views: 4274

Answers (2)

Yazane
Yazane

Reputation: 1

Instead of using svg.selectAll("text"), try svg.selectall("g.text"). Basically, this creates a g element to which the svg text is a child.

Upvotes: -2

jshanley
jshanley

Reputation: 9128

When you call selectAll("text").append("text") you are really saying,

"Select all text elements, and for each, append a new text element as its child"

Text elements cannot have child elements.

Check out this fiddle for proof of that.

In the last line of your code, you are calling svg.append("text") which does work because it appends the text element to the svg document, not to another text element. Hope that helps.

Upvotes: 4

Related Questions