title: d3 circles in the centre of rectangles
body: <p>Sorry to ask a trivial question. I am trying to draw some rectangles (treemap) from json file and overlay a circle on the centre of each rectangle. I am also trying to label the rectangles. The console shows correct values, But, the text is not visible &amp; the circles are not in the centre of each rectangle. The This is a very simple task and I am new to d3. Can you please help me to correct the mistake I am doing? <img src="https://i.stack.imgur.com/KHYI1.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt; Treemap &lt;/title&gt;
  &lt;script type="text/javascript" src="../d3/d3.v3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;script&gt;
  
      var jsondata = [
          {
              "name" : "Middle East",
              "size" : 861482,
              "x" : 18,
              "y" : 18,
              "width" : 415.57094333304099,
              "height" : 484
          },
          {
              "name" : "Australasia",
              "size" : 80696,
              "x" : 433.57094333304099,
              "y" : 226.66857473176645,
              "width" : 68.429056666959013,
              "height" : 275.33142526823355
          },
          {
              "name" : "Europe",
              "size" : 61158,
              "x" : 433.57094333304099,
              "y" : 18,
              "width" : 68.429056666959013,
              "height" : 208.66857473176645
          }
          ];
  
  
      var svgContainer = d3.select("body").append("svg")
              .attr("width", 1000)
              .attr("height", 1000);
      //var svgContainer = svg.append("g").attr("transform", "translate(0, 0)");
  
      var rectangles = svgContainer.selectAll("rect")
              .data(jsondata)
              .enter()
              .append("rect");
  
      var rect = rectangles.attr("x", function (d) { return d.x; })
              .attr("y", function (d) { return d.y; })
              .attr("width", function (d) { return d.width; })
              .attr("height", function (d) { return d.height; })
              .style("fill", "green")
              .style("stroke", "white")
              .style("stroke-width", "0.5")
              .style("z-index", "1");
  
      rect.append("text")
              .attr("x", function(d) { return d.x + 2; })
              .attr("y", function(d) { return d.y + 2; })
              .attr("dy", ".35em")
              .text(function(d) { return d.name; })
              .style("font-family", "Verdana")
              .style("font-size", "18")
              .style("fill", "black")
              .style("z-index", "2");
  
  
  
      var dots = svgContainer.selectAll("circle")
              .data(jsondata)
              .enter()
              .append("circle");
  
      var dot = dots.attr("cx", function (d) { return (d.x + d.width) / 2 ; })
              .attr("cy", function (d) { return (d.y + d.height) / 2 ; })
              .attr("r", "5")
              .style("fill", "white");
              //.style("z-index", "3");
  
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>