我有以下代码:
//############# SQUARES ###################
function addSquares() {
var dta = [10, 100, 1000];
var basics = squaresBasics();
var margin = basics.margin,
width = basics.width,
height = basics.height;
//Create SVG element
var SQsvg = d3.select("#threeSquares")
.append("svg")
.attr({
"width": width + margin.left + margin.right,
"height": height + margin.top + margin.bottom,
id: "squaresArea"
});
var SQg = SQsvg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
SQg.selectAll("rect")
.data(dta)
.enter()
.append("rect")
.attr({
x: margin.left,
y: function(d, i) {
return i * 65
},
"width": width,
"height": 50,
fill: "blue"
})
.on("click", up);
SQg.selectAll("text")
.data(dta)
.enter()
.append("text")
.text("foobar")
.attr({
x: margin.left,
y: function(d, i) {
return i * 65
},
"font-family": "sans-serif",
"font-size": "20px",
fill: "white"
});
}
addSquares();
只是想知道为什么文本“foobar”没有出现在方 block 内？
我这里有一个工作示例:http://plnkr.co/edit/ehFOGfIYbtTX7RxQIGef?p=preview
最佳答案
- 您的第一个问题(在浏览器的错误控制台中可见)是函数 up 未定义
- 第二，文字太高。 y 坐标指定文本的底部，因此它位于矩形上方
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Axis Testing</title>
<script src="https://d3js.org/d3.v2.js"></script>
<style type="text/css">
#threeSquares {
position: absolute;
top: 10px;
left: 10px;
width: 70px;
height: 250px;
}
#barChart {
position: absolute;
top: 10px;
left: 80px;
height: 250px;
}
</style>
</head>
<body>
<div id="threeSquares"></div>
<div id="barChart"></div>
<script type="text/javascript">
function squaresBasics() {
var margin = {
top: 35,
right: 5,
bottom: 5,
left: 5
},
width = 70 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
return {
margin: margin,
width: width,
height: height
};
}
//############# SQUARES ###################
function addSquares() {
var dta = [10, 100, 1000];
var basics = squaresBasics();
var margin = basics.margin,
width = basics.width,
height = basics.height;
//Create SVG element
var SQsvg = d3.select("#threeSquares")
.append("svg")
.attr({
"width": width + margin.left + margin.right,
"height": height + margin.top + margin.bottom,
id: "squaresArea"
});
var SQg = SQsvg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
SQg.selectAll("rect")
.data(dta)
.enter()
.append("rect")
.attr({
x: margin.left,
y: function(d, i) {
return i * 65
},
"width": width,
"height": 50,
fill: "blue"
});
SQg.selectAll("text")
.data(dta)
.enter()
.append("text")
.text("foobar")
.attr({
x: margin.left,
y: function(d, i) {
return i * 65 + 30
},
"font-family": "sans-serif",
"font-size": "20px",
fill: "white"
});
}
addSquares();
</script>
</body>
</html>关于javascript - 为什么文本不出现在 svg 矩形内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40114134/