2

SVGとd3でscale（）変換を使用しようとしています。座標スケールを大きくすることで機能することは理解していますが、オブジェクトを変換しているようです。（100,100）に長方形があり、scale（2）を実行すると、長方形のサイズが2倍になり、（0,0）に移動します。スケーリング中に（100,100）から（0,0）への移動を停止するにはどうすればよいですか。以下は私のコードです：

    var mysvg = d3.select("#viz")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("class","mylist");  

    var node = mysvg.selectAll("g.node")
        .data(mydata)
        .enter().append("g")
        .attr("class","node")
        .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });         

    node.append("rect")
        .attr("width",tileWidth)
        .attr("height",tileWidth)
        .attr("fill","orange")
        .attr("rx",10)
        .attr("ry",10);

    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .attr("font-family","serif")
        .text(function(d) { return d.symbol; });

    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });
4

2 に答える 2

5

平行移動なしでスケーリングする一般的な解決策は、ここにあります： 中心点の周りのスケーリング

アイディア：

translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)
于 2013-03-12T16:25:02.747 に答える
4

あなたmouseoverとmouseoutイベントは元のを上書きしていますtranslate(" + d.xpos + "," + d.ypos + ")。

これを回避する最も簡単な方法は、親gを追加して、次のように翻訳することだと思います...

var mysvg = d3.select("#viz")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("class","mylist");  

    var parent = mysvg.selectAll("g.parent")
        .data(mydata)
        .enter().append("g")
        .attr("class","parent")
        .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });      

    var node = mysvg.selectAll("g.parent")
        .enter().append("g")
        .attr("class","node")
     });         

    node.append("rect")
        .attr("width",tileWidth)
        .attr("height",tileWidth)
        .attr("fill","orange")
        .attr("rx",10)
        .attr("ry",10);

    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
        .attr("text-anchor", "middle")
        .attr("dy", ".3em")
        .attr("font-family","serif")
        .text(function(d) { return d.symbol; });

    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });
于 2012-06-28T13:57:50.003 に答える