javascript - d3.js svg image: scale from center of rectangle -


i'm using d3 populate cartesian plane bunch of svg:image elements spread out on different coordinates.

i'd add mouserover , mouseout logic zooms image mouse on in , lightens opacity of others. i'm filtering selection on mouseover select desired element , working great, except scaling logic doesn't seem desired effect. images expand downward , right rather in outward diagonal center.

here's i've tried:

  1. transform: scale(1.5) expands, totally shifts image's position
  2. transform: translate(-(width/2), -(height/2)) combined scale, same different starting position
  3. changing x , y coords ones adjusted half widths , heights, has same effect.

is there no text-anchor equivalent image elements set "anchor point" scale from? i'm not sure html svg parlance is, guess i'm thinking of similar anchor points lot of vector editors have.

current approach, mouseover handler:

  function fade(dir){     return function(d){       var others = svg.selectall("image.movie_cover")         .filter(function(g,i){           return g != d         })         .transition().duration(800)         .style("opacity",.3);        var single = svg.selectall("image.movie_cover")         .filter(function(g,i){           return g === d;         })         .transition().duration(900)         .attr("transform", "translate(-40,-40) scale(1.4)")          var title = keys[coords.indexof(d)];         var url = "/static/eshk/"+hash+"_images/" + title  + ".jpg";          tt.transition()                         .duration(200)                       .style("opacity", .9);               tt.html(title)                 .style("left", (d3.event.pagex) + "px")                    .style("top", (d3.event.pagey - 28) + "px");      }  } 

using method, images move inconsistent distances despite being same size.

set up: 50 x 50 box @ 200, 200. needs transition 100 x 100. 50 larger , wider, needs move , 25, eg 175, 175. replace hard coded values functions current width on mouse hover calculate exact values.

d3.select('svg').append('rect'); rect = d3.select('rect'); rect.attr({     height: 50,     width: 50,     x: 200,     y: 200,     color: 'steelblue' }) .transition() .attr({     width: 100,     height: 100,     x: 175,     y: 175 }); 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -