1

我最近基于 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;});

}
4

0 回答 0