d3: Elements move when scale() transform is applied

Question

I want SVG elements to appear larger on mouseover. Applying a CSS transform seems to be a convenient way to do this, however it also translates the objects. How do I make the circles in the below example keep their original center point? I've tried applying position: absolute; to no avail.

var dataset = [0, 2345786000, 10000000000];

var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var padding = 50;
svg.attr("width", w)
   .attr("height", h);

// Background pattern 
var patternSize = 5;
svg.append("defs")
            .append("pattern")
            .attr("id", "dotPattern")
            .attr("patternUnits", "userSpaceOnUse")
            .attr("width", patternSize)
            .attr("height", patternSize)
            .append("circle")
            .attr("cx", patternSize / 2)
            .attr("cy", patternSize / 2)
            .attr("r", 2)
            .style("stroke", "none")
            .style("fill", "lightgrey")
            .style("opacity", 0.5);
   
var xScale = d3.time.scale()
    .domain([0, 10000000000])
    .range([padding, w-padding]);
var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(5);
svg.append("g")
		.attr("class","axis")
    .attr("transform", "translate(0," + (h-padding) + ")")
    .call(xAxis);
    
var zoom = d3.behavior.zoom()
            .on("zoom", build)
            .scaleExtent([1, 20]);           
zoom.x(xScale);

var clipPath = svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("x", padding)
        .attr("y", 0)
        .attr("width",w-2*padding)
        .attr("height", h-padding);
var zoomArea = svg.append("g")
         .attr("class", "zoomArea")
         .style("cursor","move")
         .attr("clip-path", "url(#clip)");
var zoomRect = zoomArea.append("rect")
     .attr("x", padding)
     .attr("y", 0)
     .attr("width", w-2*padding)
     .attr("height", h-padding)
     .style("fill", "url(#dotPattern)")
     .style("pointer-events", "all")
     .style("cursor","move")
     .call(zoom);

zoomArea.selectAll("circles")          
	.data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d){
  	return xScale(d);
  })
  .attr("cy", h/2)
  .attr("r",10)
  .attr("fill","grey")
  .on("mouseover", function(){
  	d3.select(this)
    	.attr("transform", "scale(1.4)")
  })
  .on("mouseout", function(){
  	d3.select(this)
    	.attr("transform", "scale(1)")
  });

function build(){
					svg.select("g.axis").call(xAxis);
          d3.selectAll("circle")
          	  .attr("cx", function(d){
  							return xScale(d);
  						});
};    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

There are two possible ways of resolving this issue.

1. To scale the circle without changing it's position, do as shown below.

translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor)

Working Fiddle 1:

var dataset = [0, 2345786000, 10000000000];

var svg = d3.select("body").append("svg");
var w = 500,
  h = 200;
var padding = 50;
svg.attr("width", w)
  .attr("height", h);

// Background pattern 
var patternSize = 5;
svg.append("defs")
  .append("pattern")
  .attr("id", "dotPattern")
  .attr("patternUnits", "userSpaceOnUse")
  .attr("width", patternSize)
  .attr("height", patternSize)
  .append("circle")
  .attr("cx", patternSize / 2)
  .attr("cy", patternSize / 2)
  .attr("r", 2)
  .style("stroke", "none")
  .style("fill", "lightgrey")
  .style("opacity", 0.5);

var xScale = d3.time.scale()
  .domain([0, 10000000000])
  .range([padding, w - padding]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .ticks(5);
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

var zoom = d3.behavior.zoom()
  .on("zoom", build)
  .scaleExtent([1, 20]);
zoom.x(xScale);

var clipPath = svg.append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("x", padding)
  .attr("y", 0)
  .attr("width", w - 2 * padding)
  .attr("height", h - padding);
var zoomArea = svg.append("g")
  .attr("class", "zoomArea")
  .style("cursor", "move")
  .attr("clip-path", "url(#clip)");
var zoomRect = zoomArea.append("rect")
  .attr("x", padding)
  .attr("y", 0)
  .attr("width", w - 2 * padding)
  .attr("height", h - padding)
  .style("fill", "url(#dotPattern)")
  .style("pointer-events", "all")
  .style("cursor", "move")
  .call(zoom);

zoomArea.selectAll("circles")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return xScale(d);
  })
  .attr("cy", h / 2)
  .attr("r", 10)
  .attr("fill", "grey")
  .on("mouseover", function(d) {
    var x = xScale(d),
      y = h / 2,
      factor = 2;
    var tx = -x * (factor - 1),
      ty = -y * (factor - 1);
    d3.select(this).transition().duration(50)
      .attr("transform", "translate(" + tx + "," + ty + ") scale(" + factor + ")");
  })
  .on("mouseleave", function(d) {
    var x = xScale(d),
      y = h / 2,
      factor = 1;
    var tx = -x * (factor - 1),
      ty = -y * (factor - 1);
    d3.select(this).transition().duration(50)
      .attr("transform", "translate(" + tx + "," + ty + ") scale(" + factor + ")");
  });

function build() {
  svg.select("g.axis").call(xAxis);
  d3.selectAll("circle")
    .attr("cx", function(d) {
      return xScale(d);
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

2. Since you are using circle, you can just increase the radius of circles easily to scale them.

Working Fiddle 2:

var dataset = [0, 2345786000, 10000000000];

var svg = d3.select("body").append("svg");
var w = 500,
  h = 200;
var padding = 50;
svg.attr("width", w)
  .attr("height", h);

// Background pattern 
var patternSize = 5;
svg.append("defs")
  .append("pattern")
  .attr("id", "dotPattern")
  .attr("patternUnits", "userSpaceOnUse")
  .attr("width", patternSize)
  .attr("height", patternSize)
  .append("circle")
  .attr("cx", patternSize / 2)
  .attr("cy", patternSize / 2)
  .attr("r", 2)
  .style("stroke", "none")
  .style("fill", "lightgrey")
  .style("opacity", 0.5);

var xScale = d3.time.scale()
  .domain([0, 10000000000])
  .range([padding, w - padding]);
var xAxis = d3.svg.axis()
  .scale(xScale)
  .ticks(5);
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

var zoom = d3.behavior.zoom()
  .on("zoom", build)
  .scaleExtent([1, 20]);
zoom.x(xScale);

var clipPath = svg.append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("x", padding)
  .attr("y", 0)
  .attr("width", w - 2 * padding)
  .attr("height", h - padding);
var zoomArea = svg.append("g")
  .attr("class", "zoomArea")
  .style("cursor", "move")
  .attr("clip-path", "url(#clip)");
var zoomRect = zoomArea.append("rect")
  .attr("x", padding)
  .attr("y", 0)
  .attr("width", w - 2 * padding)
  .attr("height", h - padding)
  .style("fill", "url(#dotPattern)")
  .style("pointer-events", "all")
  .style("cursor", "move")
  .call(zoom);

zoomArea.selectAll("circles")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return xScale(d);
  })
  .attr("cy", h / 2)
  .attr("r", 10)
  .attr("fill", "grey")
  .on("mouseover", function() {
    d3.select(this).transition().duration(50).attr("r", 20);
  })
  .on("mouseleave", function() {
    d3.select(this).transition().duration(50).attr("r", 10);
  });

function build() {
  svg.select("g.axis").call(xAxis);
  d3.selectAll("circle")
    .attr("cx", function(d) {
      return xScale(d);
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>