multiple svg layered on canvas, let svg movable и resizeable

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

BTW, вам нужно познакомиться с различными d3selection.attr и d3selection.style.

атр используется для пар атрибутов

стиль используется для стиля CSS.

В военные дни войны они немного беспорядочны, но теперь у нас есть намного лучший стандарт для этого.