D3 Brush coordinates under CSS transform scale

1
votes

D3 brush does not function properly under css transform scale. When svg is under div element, and div element is transformed using CSS scale, the brush operation shows wrong coordinates.

To demonstrate this case, here is the jsFiddle.

It is simple modification from Bostock's Brushable Network example.

What I did was simply putting SVG in the div element and made div element zoom 50% using CSS transform scale(0.5). And the brushing coordinates are not updating because of zooming. 

#test {
transform: scale(0.5);
}

Thanks.

Deok

2
cssd3.jstransformscalebrush
You can find the similar issue for single mouse event here. It suggests the use of the following code to transform between original coordinates. But it would be great if somebody can point the appropriate approach for the brush event. - intuinno
Your jsfiddle is giving me an error. - Lars Kotthoff
I am sorry the correct link is jsfiddle.net/intuinno/5cpgkqhu - intuinno

2 Answers

2
votes

If you use an svg based transform:

transform="scale(0.5)"

Then it'll play nice with the brush:

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

svg = svg.append("g")
    .attr("transform","scale(0.5)");

Updated fiddle.

To fix the calculations you need two things.

1.) Scale the extent rect opposite the div:

.extent {
   transform: scale(2);
}

2.) Fix the extent calculations:

   .on("brush", function() {
      var extent = d3.event.target.extent();
      node.classed("selected", function(d) {
        return extent[0][0] <= d.x && d.x < extent[1][0] && 
               extent[0][1] <= (d.y/2) && (d.y/2) < extent[1][1]; // scale y opposite div transform
      });
   });

New example here.

1
votes

If you use CSS transform you should apply it to all the classes that related by nodes:

 .node {
  stroke: #fff;
  stroke-width: 1.5px;
  transform: scale(0.5);
 }

 .node .selected {
        stroke: red;
  }

.link {
   stroke: #999;
     transform: scale(0.5);
  }

.brush .extent {
  fill-opacity: .1;
  stroke: #fff;
  shape-rendering: crispEdges;
  transform: scale(0.5);
}

When you add transform: scale(0.5); you can brush all the node. Try from left to right over node position.

 var width = 960,height = 500;
  var svg = d3.select("#body").append("svg")
        .attr("width", width)
        .attr("height", height);


    graph.links.forEach(function(d) {
        d.source = graph.nodes[d.source];
        d.target = graph.nodes[d.target];
    });

    var link = svg.append("g")
        .attr("class", "link")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .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; });

    var node = svg.append("g")
        .attr("class", "node")
        .selectAll("circle")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("r", 4)
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    var brush = svg.append("g")
        .attr("class", "brush")
        .call(d3.svg.brush()
            .x(d3.scale.identity().domain([0, width]))
            .y(d3.scale.identity().domain([0, height]))
            .on("brush", function() {
                var extent = d3.event.target.extent();
                node.classed("selected", function(d) {
                    return extent[0][0] <= d.x && d.x < extent[1][0]
                        && extent[0][1] <= d.y && d.y < extent[1][1];
                });
            }));

Complete jsfiddle here.