-1

元の変換 (40) から X を引いた値を取得し、g を新しい変換値 (40-x,20) に設定します。変換文字列を解析するより良い方法は何ですか?

<label><input type="checkbox"> Sort values</label> 

<g class="state" transform="translate(40,20)">

d3.select("input").on("change", change);

  function change() {
d3.selectAll(".state").attr("x",50);
    var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".state")
        .attr("transform", function(d) { COOL MAGIC});
}
4

1 に答える 1

0

svg の変換プロパティを解析するには、2 種類のアプローチが考えられます。

オプション A

// Svg Dom 要素をパラメータとしてこの関数に送信します。変換文字列の X,Y を返します。

function getTransformString(svgElement){
 var transformString=svgElement.getAttribute('transform');
    if(transformString){
        var splitBraces=transformString.split('(');
        splitBraces=splitBraces[1].split(')');
        var splitComma=splitBraces[0].split(',');
        return {
            x:splitComma[0],
            y:splitComma[1]
          }
      }

return null;

}

オプション B // Dom 操作が最小限であるため、このアプローチをお勧めします。このオプションでは、ローカル変数で移動 X、Y を追跡します。

var TransformX=0,TransformY=0;

function setSvgTransform(x,y,svgElement){
TransformX=x;
TransformY=y;
var translateString='translate('+x+','+y+')';
svgElement.setAttribute('transform',translateString);
}

function changeSvgTrasform(svgElement){
// now here we do not need to parse transform string to get current value of transform.

var Current_TX=TransformX;
var Current_TY=TransformY;

var newTX=Current_TX-40;

setSvgTransform(newTX,Current_TY,svgElement);

}
于 2013-07-12T23:00:18.120 に答える