whytheq whytheq - 1 month ago 4
CSS Question

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>




Answer

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