javascript - ズーム動作を使用して D3 で楕円をズーム + パンする方法

Question

最近、D3 の例に基づいてパン + ズームを適用しましたhttp://bl.ocks.org/mbostock/3680957

これは、多角形、線、円には適していますが、楕円には適していません。楕円をパン + ズームし、rx 値と ry 値をそれぞれスケーリングすると、新しい rx/ry 値が期待どおりに変化しません。楕円は大幅に形を変え、時には消えることさえあります (rx/ry が負になります)。

オンラインで他の同様の例を見てきましたが、楕円でも機能しません。

これはJSFiddleの例ですhttp://jsfiddle.net/44VYK/

これは D3 の問題ではないと思います。私の直感によると、この例と D3 のズーム動作で何か基本的なことを見逃しているようです。

誰かが私が見逃したことを助けて明確にすることができれば、本当に感謝しています。単純な見落としだと思いますが、踏みにじられています。

jsFiddle コードは次のとおりです。

    var width = 960,
    height = 500;

var data = [{x:300,y:300, rx:100, ry:50, theta:45}];
var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, 1]);

var y = d3.scale.linear()
    .domain([0, 1])
    .range([0, 1]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([.2, 8]).on("zoom", zoom));

var r2d = 180.0 / Math.PI;

var ellipse = svg.selectAll("ellipse")
    .data(data)
    .enter().append("ellipse")
    .attr("cx", function(d) {return x(d.x);})
    .attr("cy", function(d) {return y(d.y);})
    .attr("rx", function(d) {return x(d.rx);})
    .attr("ry", function(d) {return y(d.ry);})
    .attr('transform', function (d) {
        return 'rotate('+ x(d.theta * r2d) + ' ' + x(d.x) + ' ' + y(d.y) + ')';
     });

var circle = svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", "yellow")
.attr("cx", function(d) {return x(d.x);})
.attr("cy", function(d) {return y(d.y);})
.attr("r", function(d) {return 30;});

function zoom() {
    ellipse
    .attr("cx", function(d) {return x(d.x);})
    .attr("cy", function(d) {return y(d.y);})
    .attr("rx", function(d) {return x(d.rx);})
    .attr("ry", function(d) {return y(d.ry);})
    .attr('transform', function (d) {
        return 'rotate('+ x(d.theta * r2d) + ' ' + x(d.x) + ' ' + y(d.y) + ')';
     });

    circle
    .attr("cx", function(d) {return x(d.x);})
    .attr("cy", function(d) {return y(d.y);})
    .attr("r", function(d) {return 30;});

}