Почему этот прямоугольник не шире

У меня есть следующий код и ожидал увидеть широкий тонкий прямоугольник светлого цвета - почему прямоугольник не шириной 700 пикселей?Почему этот прямоугольник не шире

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
 
    <title>Testing Pie Chart</title> 
 
    <script src="http://d3js.org/d3.v3.js"></script> 
 
    <style type="text/css"> 
 
    .clickBut { 
 
     font-family: verdana; 
 
     font-size: 9px; 
 
     font-weight: bold; 
 
     background-color: #ffa500 !important; 
 
     border-radius: 100px; 
 
     shape-rendering: crispEdges; 
 
    } 
 
    
 
    #prodTitle { 
 
     position: absolute; 
 
     top: 5px; 
 
     left: 10px; 
 
     width: 750px; 
 
     height: 35px; 
 
    } 
 
    
 
    
 
    
 
    .slice { 
 
     font-size: 12pt; 
 
     font-family: Verdana; 
 
     fill: white; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .line { 
 
     fill: none; 
 
     stroke-width: 3px; 
 
    } 
 
    
 
    .title { 
 
     font-family: Verdana; 
 
     font-size: 11px; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .yAxis text, 
 
    .xAxis text { 
 
     font: 7pt Verdana; 
 
     stroke: none; 
 
     fill: black; 
 
    } 
 
    
 
    .axis--y path, 
 
    .axis--x path { 
 
     display: none; 
 
    } 
 
    
 
    .axis--x line, 
 
    .axis--y line { 
 
     stroke: black; 
 
     fill: none; 
 
     stroke-width: 2px 
 
    } 
 
    
 
    .axis--y line { 
 
     stroke-width: 1px 
 
    } 
 
    
 
    .bar:hover { 
 
     fill: orange; 
 
    } 
 
    
 
    .d3-tip { 
 
     line-height: 1; 
 
     font-size: 10px; 
 
     padding: 10px; 
 
     background: rgba(0, 0, 0, 0.7); 
 
     color: #fff; 
 
     border-radius: 2px; 
 
    } 
 
    
 
    .d3-tip:after { 
 
     box-sizing: border-box; 
 
     display: inline; 
 
     font-size: 10px; 
 
     width: 100%; 
 
     line-height: 1; 
 
     color: rgba(0, 0, 0, 0.8); 
 
     content: "\25BC"; 
 
     position: absolute; 
 
     text-align: center; 
 
    } 
 
    
 
    .d3-tip.n:after { 
 
     margin: -1px 0 0 0; 
 
     top: 100%; 
 
     left: 0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <!-- <div id="square"></div> --> 
 
    <div id="prodTitle"></div> 
 
    <script type="text/javascript"> 
 

 

 
    addProdTitl(); 
 

 

 
    // ########################################### 
 
    function prodTitlBasics() { 
 
     var margin = { 
 
       top: 2, 
 
       right: 2, 
 
       bottom: 2, 
 
       left: 70 
 
      }, 
 
      width = 700, 
 
      height = 35; 
 

 
     return { 
 
      margin: margin, 
 
      width: width, 
 
      height: height 
 
     }; 
 
    } 
 

 
    function addProdTitl() { 
 

 
     var basics = prodTitlBasics(); 
 
     var margin = basics.margin, 
 
      width = 700 - margin.left - margin.right, 
 
      height = basics.height; 
 

 
     console.log(width) 
 

 
     var t = d3.select("#prodTitle") 
 
      .append("svg"); 
 

 
     var x = t 
 
      .append("g") 
 
      .attr({ 
 
       "transform": "translate(" + margin.left + "," + height + ")", 
 
       id: "svgGxxx" 
 
      }); 
 

 
     x 
 
      .append("rect") 
 
      .attr({ 
 
       "transform": "translate(5,5)" 
 
      }) 
 
      .attr({ 
 
       x: 0, //margin.left, 
 
       y: 0, //margin.top, 
 
       width: 700, //width, 
 
       height: 5, //20, 
 
       fill: "lightgrey" 
 
      }) 
 

 
    } 
 

 

 
    
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-10-27 whytheq

От создания элемента Inspect, могу сказать, что прямоугольник * * 700px. Однако ваш SVG составляет всего 300 пикселей и имеет 'overflow: hidden;'. – Santi

@ Санти прав, это выглядит отлично, если вы добавили widht: 100% к вашему svg. – deadfishli

Для большинства браузеров, если вы не установите ширину х высоту SVG, он автоматически устанавливается размер по умолчанию 300 х 150.

Давайте проверим это , Во-первых, мы добавляем SVG без определения его ширины или высоты:

var svg = d3.select("body").append("svg");

После этого, давайте посмотрим, что его ширина/высота:

svg.node().getBoundingClientRect()

Проверьте демо:

var svg = d3.select("body").append("svg"); 
 

 
console.log("width is " + svg.node().getBoundingClientRect().width); 
 

 
console.log("height is " + svg.node().getBoundingClientRect().height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Как уже упоминалось в комментариях, это дополнение ответы на вопрос:

var t = d3.select("#prodTitle") 
     .append("svg") 
     .attr({"width":"100%"}); //<<added so it expands to required width

источник

2016-10-27 16:35:32

спасибо Херардо - Мне казалось, что я вспомнил, что сказал, что svg-авто-размер? Это только моя подозрительная память играет на меня трюки? – whytheq

Почему этот прямоугольник не шире

ответ

Смежные вопросы