Why is this rectangle not wider
<p>I have the following code and was expecting to see a wide thin lightgrey rectangle - why is the rectangle not 700px wide?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Testing Pie Chart&lt;/title&gt;
    &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
    .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;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;!-- &lt;div id="square"&gt;&lt;/div&gt; --&gt;
    &lt;div id="prodTitle"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;


    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"
            })

    }


    
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>