Edge Scaling Error Demo

This demonstrates an error in Edge's SVG functionality that causes the node labels to shift to the right when the graphic is zoomed in.

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg id="container" width="200" height="200">
  <g id="inner-container">
    
  </g>
</svg>

JavaScript

var container = d3.select("#container");
var innerContainer = container.select("g");
container.call(d3.behavior.zoom().scaleExtent([.5,4]).on("zoom", function(){
  innerContainer.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}));

var nodes = innerContainer.append("g").selectAll(".graph-node");
var labels = innerContainer.append("g").selectAll(".graph-label");

var data = ["A", "B", "C", "D", "E"];

nodes.data(data).enter().call(function (selection){
  selection = selection.append("g");
  selection.attr("class", ".graph-node");
  selection.attr("transform", function(d, i){
    return ["translate(", (i * 20).toString(), " ", (i * 20).toString(), ")"].join("");
  });
  selection.append("rect")
    .attr("width", 20)
    .attr("height", 20)
    .attr("rx", 2).attr("ry", 2)
    .attr("fill", "red");
  selection.append("text")
    .text(function(d){ return d; })
    .attr("text-anchor", "middle")
    .attr("x", 10).attr("y", 15)
    .style("fill", "white");
});
labels.data(data).enter().call(function (selection){
  selection = selection.append("g");
  selection.attr("class", "graph-label");
  selection.append("text")
    .text(function (d) { return "Node" + d; });
  selection.attr("transform", function (d, i) {
    return ["translate(", (i * 20 + 25).toString(), " ", (i * 20 + 15).toString(), ")"].join("");
  });
});