Firefox developer tool rect vs getBBox

Firefox developer tool rect vs getBBox

by Ibrahim Tanyalcin

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

svg{
  background: whitesmoke;
  width:1800px;
  height:600px;
}

path{
  stroke: blue;
  shape-rendering:crispEdges;
  stroke-width:1px;
  stroke-
}

JavaScript

var svg = d3.select("body")
  .append("svg")
  .attr('viewBox', '0 0 1800 600');

function drawCandle(x, y, width, upper, body, lower){
  var path = d3.path()
  // path.moveTo(x + width/2, y)
  // path.lineTo(x + width/2, y + upper + body + lower)
  
  //draw the candle upper wick
  path.moveTo(x + width/2, y)
  path.lineTo(x + width/2, y + upper)
  
  //draw the candle body
  path.moveTo(x, y + upper)
  path.lineTo(x + width, y + upper)
  path.lineTo(x + width, y + upper + body)
  path.lineTo(x + width, y + upper + body)
  path.lineTo(x, y + upper + body)
  
  //lower wick
  path.moveTo(x + width/2, y + upper + body)
  path.lineTo(x + width/2, y + upper + body + lower)
  path.closePath()
  return path
}

var p = svg.append('path')
console.log(p.style('stroke-width'))

p.attr('d', drawCandle(200,100,20, 10, 10, 10));

console.log(p.node().getBBox());