CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
whytheq
whytheq

Reputation: 35605

Why is this rectangle not wider

I have the following code and was expecting to see a wide thin lightgrey rectangle - why is the rectangle not 700px wide?

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

Upvotes: 0

Views: 86

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

For most browsers, when you don't set the width x height of a SVG, it's automatically set to a default size of 300 x 150.

Let's check it. First, we append the SVG without defining its width or height:

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

After that, let's see what is its width/height:

svg.node().getBoundingClientRect()

Check the demo:

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>

As mentioned in the comments this addition answers the question:

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

Upvotes: 2

Related Questions