在畫布上分層的多個svg，讓svg可移動並調整大小

Question

正如我們所看到的，div可以拖動，可以使用javascript調整大小。 http://jqueryui.com/draggable/

svg也是html元素， 難道我用css + jquery拖動，調整SVG。

這裏，svg是整個svg，而不是svg元素的孩子。

我知道我是否可以使用svg元素組（g）進行翻譯。但是svg沒有改變，位置沒有改變。

我試過設置left,top。我也試過設置x,y。

var svg = d3.select("body").append("svg") 
            .attr("left", 200) 
            .attr("top", 200); 
            .attr("width", 200) 
            .attr("height", 200); 



var svg = d3.select("body").append("svg") 
          .attr("x", 200) 
          .attr("y", 200); 
          .attr("width", 200) 
          .attr("height", 200); 

是否有可能使其可拖動和可調整大小？

Div是一個DOM元素，它可以調整大小，拖動。

svg也是一個Dom元素，它可以調整大小和拖動嗎？

雖然，我仍然有上述問題，謝謝大家Alvin K：它解決了我的問題：http://jsfiddle.net/ynternet/bf3zck06/1/

感謝您的時間。

Answer 1

用於縮放和拖動的演示：http://plnkr.co/edit/sSXYpwjvVB8m1GVuE40A?p=preview var svg = d3.select（「＃chart1」）。append（'svg'）;

svg.attr("width", 200) 
    .attr("height", 200) 
    .attr("viewBox", "0 0 200 200"); 

var circle = svg.append('circle') 
    .attr({ 
    r: 30, 
    cx: 100, 
    cy: 100 
    }) 
    .style({ 
    fill: "green", 
    stroke: "red" 
    }); 
var open = false; 
circle.on('click', function(e) { 
    open = !open; 
    if (open) { 
    svg.attr("viewBox", "0 0 200 200"); 
    } else { 
    svg.attr("viewBox", "0 0 400 400"); 
    } 
}) 


circle.on("mousemove", function() { 
    circle.attr("cx", d3.mouse(this)[0]); 
    circle.attr("cy", d3.mouse(this)[1]); 
});  

是的，你應該可以像其他DOM那樣工作。

如果您使用的是d3，d3完全可以調整大小和縮放比例。不需要涉及jQuery來使事情更加複雜。你可以將你的代碼附加到jsbin或plunker中

順便說一句，你需要了解d3selection.attr和d3selection.style的不同。

屬性用於屬性對

樣式用於css樣式。

在瀏覽器的戰爭日子裏，他們有點亂，但現在，我們有更好的標準。