title: SVG rect border, not stroke
body: <p>I am making a d3 graph and trying to put a border around my rect elements. The rect elements are appended to a cell and the text elements are appended to the same cell. Thus if I change the stroke in the rect I lose all the text for some reason, and if I change the stroke in the cell the borders and fonts change too.</p>
  
  <p>This is a portion of my code for drawing the graph.</p>
  
  <pre><code>this.svg = d3.select("#body").append("div")
  
            .attr("class", "chart")
            .style("position", "relative")
            .style("width", (this.w +this.marginTree.left+this.marginTree.right) + "px")
            .style("height", (this.h + this.marginTree.top + this.marginTree.bottom) + "px")
            .style("left", this.marginTree.left +"px")
            .style("top", this.marginTree.top + "px")
          .append("svg:svg")
            .attr("width", this.w)
            .attr("height", this.h)
          .append("svg:g")
            .attr("transform", "translate(.5,.5)");
  
  
          this.node = this.root = this.nestedJson;
  
  
  
          var nodes = this.treemap.nodes(this.root)
              .filter(function(d) { return !d.children; });
  
          this.tip = d3.tip()
                .attr('class', 'd3-tip')
                .html(function(d) {
                  return "&lt;span style='color:white'&gt;" + (d.name+",\n "+d.size) + "&lt;/span&gt;";
                })
          this.svg.call(this.tip);
  
  
  
          var cell = this.svg.selectAll("g")
              .data(nodes)
              .enter().append("svg:g")
              .attr("class", "cell")
              .call(this.position)
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .on("click", function(d) { return this.zoom(this.node == d.parent ? this.root : d.parent); })
              .style("border",'black');
  
          var borderPath = this.svg.append("rect")
              .attr("x", this.marginTree.left)
              .attr("y", this.marginTree.top)
              .attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
              .attr("width", this.w - this.marginTree.left - this.marginTree.right)
              .style("stroke", 'darkgrey')
              .style("fill", "none")
              .style("stroke-width", '3px');
  
  
          cell.append("svg:rect")
  
              .attr("id", function(d,i) { return "rect-" + (i+1); })
              .attr("class","highlighting2")
                  .attr("title", function(d) {return (d.name+", "+d.size);})
                  .attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
            .attr("width", function(d) { return d.dx - 1; })
            .attr("height", function(d) { return d.dy ; })
            .on('mouseover', this.tip.show)
                  .on('mouseout', this.tip.hide)
            .style("fill", function(d) {return coloring(d.color);});
  
  
          cell.append("svg:text")
              .attr("class", "treemap-text nameTexts") 
              .attr("id", function(d,i) { return "name-" + (i+1); })
              .attr("x", cellMargin)  
              .attr("y", function(d) {  return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
            .text(function(d) {return (d.name);});
  
         cell.append("svg:text")
              .attr("class", "treemap-text sizeTexts") 
              .attr("id", function(d,i) { return "size-" + (i+1); })  
              .attr("x", cellMargin)  
              .attr("y", function(d) {  return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
              .text(function(d) {return (d.size);});
  </code></pre>
  
  <p>Additionally, I thought about creating lines and drawing four lines around each rect element, but was wondering if there is an easier way. Thanks.</p>