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的不同。

attr用于属性对

样式用于css样式。

在浏览器战争时期，它们有点混乱，但现在，我们有更好的标准。

多个svg在画布上分层，让svg可移动和可调整大小

1 个答案: