我们可以看到,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/
答案 0 :(得分:0)
缩放和拖动的演示: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样式。
在浏览器战争时期,它们有点混乱,但现在,我们有更好的标准。