D3 可调整大小的椭圆答案

【问题标题】：D3 resizable ellipseD3 可调整大小的椭圆
【发布时间】：2015-10-07 04:15:49
【问题描述】：

我需要在 D3 中创建一个可调整大小的椭圆。我希望通过抓住椭圆右下角的单个拖动处理程序来缩放它。我为可调整大小的圆圈找到了几个示例（例如：http://jsfiddle.net/Pxbrf/），但对于椭圆却没有。任何帮助都会很棒...谢谢！

需要类似的解决方案：

window.onload = function() {
var R = Raphael("canvas", 500, 500),
    c = R.circle(100, 100, 50).attr({
        fill: "hsb(.8, 1, 1)",
        stroke: "none",
        opacity: .5
    }),
    s = R.circle(125, 125, 15).attr({
        fill: "hsb(.8, .5, .5)",
        stroke: "none",
        opacity: .5
    });
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");    
    this.oy = this.attr("cy");

    this.sizer.ox = this.sizer.attr("cx");    
    this.sizer.oy = this.sizer.attr("cy")

    this.attr({opacity: 1});
    this.sizer.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
    this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
    this.sizer.attr({opacity: .5});
},
rstart = function() {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");        

    this.big.or = this.big.attr("r");
},
rmove = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dy, cy: this.oy + dy});
    this.big.attr({r: this.big.or + 
                   (dy < 0 ? -1 : 1) * Math.sqrt(2*dy*dy)});
};
c.drag(move, start, up);    
c.sizer = s;
s.drag(rmove, rstart);
s.big = c;
};

只有我需要将它编码用于 d3.js 而不是 Raphael.js

【问题讨论】：

d3 中没有为此内置任何内容，因此您必须编写调整大小句柄并自己调整大小。

标签： d3.js svg resize ellipse resizable

【解决方案1】：

在您给出的示例中，一个圆均匀地增长，即在 x 轴和 y 轴上，但在椭圆中，它可以在 x 轴和 y 轴上增长（即短轴和长轴都可以改变）。

在下面的示例中，我使用变换比例来增加和减小整个椭圆的大小。

var svg = d3.select("body").append("svg");
var scale = 1;
svg.attr("width", 500).attr("height", 500);
var g = svg.append("g")
g.append("ellipse")
    .attr("cx", function (d) {
    return 300;
})


    .attr("cy", function (d) {
    return 100;
})
    .attr("rx", 150)
    .attr("ry", 100);
d3.select("#increase").on("click", increase);
d3.select("#decrease").on("click", decrease);
//increase via scaling
function increase() {
    scale +=0.1;
    g.transition().delay("100").attr("transform", "scale("+scale+")");
    
}
function decrease() {
    scale -=0.1;
    g.transition().delay("100").attr("transform", "scale("+scale+")");
}

ellipse {
    stroke: none;
    fill: brown;
    opacity: 0.7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
    <button id="increase">Increase</button>
    <button id="decrease">Decrease</button>
</body>

希望这会有所帮助！

【讨论】：