Javascript 如何缩放&x2B；使用缩放行为在D3中平移椭圆

我最近应用了基于D3示例的平移+缩放

这适用于多边形、直线、圆，但不适用于椭圆。当我平移+缩放椭圆并缩放rx和ry值时，新的rx/ry值不会像我预期的那样改变。椭圆大大重塑，有时甚至消失（rx/ry为负值）

我在网上看过其他类似的例子，它们也不适用于省略号

下面是一个JSFIDLE示例

我不认为这是D3的问题，我的直觉告诉我，我已经错过了一些基本的例子和D3的缩放行为

如果有人能帮我澄清我错过了什么，我将不胜感激。我怀疑这是一个简单的疏忽，但我被踩了

以下是JSFIDLE代码：

    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;});

}

---

找到了另一篇回答我问题的帖子：