爲什麼文本不會出現在SVG rects

裏面我有以下代碼：爲什麼文本不會出現在SVG rects

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

來源

2016-10-18 whytheq

你的第一個問題，可見在瀏覽器的錯誤控制檯是函數了沒有定義
二文本過高。該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>

來源

2016-10-18 17:54:43

感謝快速反應羅伯特...懷疑這不會是最後一次我廠的臉在我的手中，同時瀏覽d3/svg/html/css學習曲線！ – whytheq

爲什麼文本不會出現在SVG rects

回答

相關問題