D3可调整大小的椭圆

问题描述：

我需要在D3中创建可调整大小的椭圆。我希望通过在椭圆的右下角抓住一个拖动处理程序来缩放它。我发现了几个例子（像这个：http://jsfiddle.net/Pxbrf/）可调整大小的圆，但没有椭圆。任何帮助将是伟大的...谢谢！D3可调整大小的椭圆

需要类似的解决方案是：

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中，因此您必须编码调整大小手柄并调整自己的大小。 –

答

在你给一个圆圈的例子生长均匀，即无论是在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>

希望这有助于！

D3可调整大小的椭圆

相关推荐