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

}

如何使用缩放行为在D3中缩放+平移椭圆

0 个答案: