为什么文本不出现在svg rect中

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

只是想知道为什么文本“ foobar”没有出现在正方形内？

我在这里有一个工作示例： http : //plnkr.co/edit/ehFOGfIYbtTX7RxQIGef?p=preview

Answer 1

浏览器错误控制台中显示的第一个问题是未定义功能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>

为什么文本不出现在svg rect中

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-18 17:54:43

为什么文本不出现在svg rect中

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-18 17:54:43

解决方案1
2 已采纳 2016-10-18 17:54:43