Question

我需要在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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助！

D3可调整大小的椭圆

1 个答案: