为什么文本没有出现在svg矩形中?

Why does the text not appear inside the svg rects

本文关键字：svg 文本 为什么      更新时间：2023-09-26

我有以下代码:

//############# 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"不出现在正方形内?

我这里有一个工作的例子: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>

相关文章：