D3.JS verloren Balkendiagramm Text nach dem Hinzufügen Titel

Question

Dies ist der vollständige Code meiner Graph

var dataset = [42.7, 42.7, 43.51]; 
 

 
var width = 400; \t 
 
var height = 400; \t 
 
\t 
 
var svg = d3.select("body") \t \t \t 
 
\t \t \t .append("svg") \t \t \t 
 
\t \t \t .attr("width", width) \t 
 
\t \t \t .attr("height", height); 
 
\t \t \t 
 
var xAxisWidth = 300; 
 

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

 
var yScale = d3.scale.linear() 
 
       .domain([40, 45]) 
 
\t \t \t \t //.domain([80,d3.max(dataset)]) 
 
\t \t \t \t .range([0,yAxisWidth]); \t \t \t 
 
\t 
 
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") 
 
\t \t \t \t .data(dataset) \t \t 
 
\t \t \t \t .enter() \t \t \t 
 
\t \t \t \t .append("rect") \t 
 
\t \t \t \t .attr("fill","steelblue") \t \t 
 
\t \t \t \t .attr("x", function(d,i){ \t \t 
 
\t \t \t \t \t return padding.left + + 40 + i * 85; 
 
\t \t \t \t }) 
 
\t \t \t \t .attr("y", function(d){ \t \t 
 
\t \t \t \t \t return height- padding.bottom - yScale(d); 
 
\t \t \t \t }) 
 
\t \t \t \t .attr("width", 50) \t \t 
 
\t \t \t \t .attr("height",function(d){ \t 
 
\t \t \t \t \t return yScale(d); 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
var text = svg.selectAll("text") 
 
\t \t \t \t .data(dataset) \t \t \t 
 
\t \t \t \t .enter() \t \t \t \t 
 
\t \t \t \t .append("text") \t \t \t 
 
\t \t \t \t .attr("fill","white") 
 
\t \t \t \t .attr("font-size","14px") 
 
\t \t \t \t .attr("text-anchor","middle") 
 
\t \t \t \t .attr("x", function(d,i){ 
 
\t \t \t \t \t return padding.left + 40 + i * 85; 
 
\t \t \t \t }) 
 
\t \t \t \t .attr("y", function(d){ 
 
\t \t \t \t \t return height- padding.bottom - yScale(d); 
 
\t \t \t \t }) 
 
\t \t \t \t .attr("dx",xScale.rangeBand()/2) 
 
\t \t \t \t .attr("dy","1em") 
 
\t \t \t \t .text(function(d){ 
 
\t \t \t \t \t return d; 
 
\t \t \t \t }); 
 

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

 
yScale.range([yAxisWidth,0]); 
 
\t \t \t \t 
 
var yAxis = d3.svg.axis() 
 
\t \t \t \t .scale(yScale) 
 
\t \t \t \t .orient("left"); 
 
\t \t \t \t 
 
svg.append("g") 
 
\t \t .attr("class","axis") 
 
\t \t .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")") 
 
\t \t .call(xAxis); 
 
\t \t \t 
 
svg.append("g") 
 
\t \t .attr("class","axis") 
 
\t \t .attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) + ")") 
 
\t \t .call(yAxis);

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

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

In D3.js, wenn ich ein Balkendiagramm wie diese

ziehen

Wenn ich den Titel darüber einfügen möchte nachdem ich schreibe

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

der Graph werden und die erste Zahl der Bar verloren

, wie dieses Problem zu beheben?

Answer 1

Das Verschieben des Teils des Codes, der den Titel am Ende des Skripts hinzufügt, löst Ihr Problem.

Wenn Sie den Titel zuerst anhängen, steht er in gewisser Weise in Konflikt mit Ihren Bar-Labels. Meine Vermutung wäre, dass es ist, weil Sie zuerst den title Text anhängen und dann machen Sie eine svg.selectAll('text') später, die das Problem verursacht.

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

Überprüfen Sie die jsfiddle hier - https://jsfiddle.net/3hwxfdxk/