D3.js - Changing force directed graph node from circle to svg:rect

Question

I'm modifying this example of a collapsible, hierarchical force layout and I'm having trouble changing the nodes from circles to squares (using svg:rect). With my current code, all of the squares appear in the top left hand corner. Otherwise they're behaving relatively normally (I can click on them to expand/collapse the tree).

Here is my CSS styles that I'm using for this and other functions:

    .node {
      cursor: pointer;
    }
    .node rect {
      fill: skyblue;
      stroke: green;
      stroke-width: 1.5px;
    }
    .node text {
      font: 10px sans-serif;
    }
    .link {
      fill: none;
      stroke: green;
      stroke-width: 1.5px;
    }
    #container div{
      float:left;
    }
    .chartSpace div{
      float:left;
      margin-right:screen.width-960px;
    }

Here is the code for the force layout:

function forceDirected(){
            //Clear SVG
            d3.select("svg").remove();

            var width = 960,
                height = 500,
                root;

            var force = d3.layout.force()
                .size([width, height])
                .on("tick", tick);

            var svg = d3.select(".chartSpace").append("svg")
                .attr("width", width)
                .attr("height", height);

            var link = svg.selectAll(".link"),
                node = svg.selectAll(".node");

            d3.json("flare.json", function(flare) {
              root = flare;
              update();
            });

            function update() {
              var nodes = flatten(root),
                  links = d3.layout.tree().links(nodes);

              // Restart the force layout.
              force
                  .nodes(nodes)
                  .links(links)
                  .start();

              // Update the links…
              link = link.data(links, function(d) { return d.target.id; });

              // Exit any old links.
              link.exit().remove();

              // Enter any new links.
              link.enter().insert("line", ".node")
                  .attr("class", "link")
                  .attr("x1", function(d) { return d.source.x; })
                  .attr("y1", function(d) { return d.source.y; })
                  .attr("x2", function(d) { return d.target.x; })
                  .attr("y2", function(d) { return d.target.y; });

              // Update the nodes…
              node = node.data(nodes, function(d) { return d.id; }).style("fill", color);

              // Exit any old nodes.
              node.exit().remove();

              // Enter any new nodes.
              node.enter().append("svg:rect")
                  .attr("class","node")
                  .attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; })
                  .attr("width", "6")
                  .attr("height", "6")
                  .on("click", click)
                  .call(force.drag);
            }

            function tick() {
              link.attr("x1", function(d) { return d.source.x; })
                  .attr("y1", function(d) { return d.source.y; })
                  .attr("x2", function(d) { return d.target.x; })
                  .attr("y2", function(d) { return d.target.y; });

              node.attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; });
            }

            // Stroke colors
            function strColor(d) {
              return d._children ? "green" : d.children ? "green" : "green";
            }

            // Node colors
            function color(d) {
              return d._children ? "skyblue" : d.children ? "skyblue" : "skyblue";
            }

            // Toggle children on click.
            function click(d) {
              if (!d3.event.defaultPrevented) {
                if (d.children) {
                  d._children = d.children;
                  d.children = null;
                } else {
                  d.children = d._children;
                  d._children = null;
                }
                update();
              }
            }

            // Returns a list of all nodes under the root.
            function flatten(root) {
              var nodes = [], i = 0;

              function recurse(node) {
                if (node.children) node.children.forEach(recurse);
                if (!node.id) node.id = ++i;
                nodes.push(node);
              }

              recurse(root);
              return nodes;
            }
        }

Answer 1

node.enter().append("svg:rect")
  .attr("class","node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })

should be

var rectSize = 6;
node.enter().append("svg:rect")
  .attr("class","node")
  .attr("x", function(d) { return d.x + rectSize/2; })
  .attr("y", function(d) { return d.y + rectSize/2; })
  .attr("width", rectSize)
  .attr("height", rectSize)

rect elements are positioned by setting the location of their upper left hand corner with x and y; circle elements' centers are set with cx and cy.