D3.JS添加标题

Question

这是我图的完整代码

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>

在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/