Question

我有以下代码：

//############# 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();

只是想知道为什么文本＆＃34; foobar＆＃34;没有出现在广场内？

我在这里有一个有效的例子：http://plnkr.co/edit/ehFOGfIYbtTX7RxQIGef?p=preview

Answer 1

您的浏览器错误控制台中显示的第一个问题是未定义功能
其次文字太高了。 y坐标指定文本的底部，使其位于矩形

＆＃13;

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

＆＃13;

为什么文本不会出现在svg rects中

1 个答案: