我正在使用rectangle
创建d3.js
,在该矩形内我创建了10个较小的矩形。
我想在鼠标点击时将整个东西复制到另一个svg元素中。
代码的 jsfiddle
链接:http://jsfiddle.net/nikunj2512/XK585/
以下是代码:
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
//Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("fill", "red")
.attr("width", 200)
.attr("height", 200);
var bigRectContainer = d3.select('#bigRectContainer').append('svg')
.attr('width', 200)
.attr('height', 200);
var dim = 20;
var x = 0;
var y = 0;
for (i = 1; i < 11; i++) {
x = 10 + (i-1)*dim;
//alert(x);
y = 10;
svgContainer.append("rect")
.attr("x", x)
.attr("y", y)
.attr("width", 20)
.attr("height", 20)
.style("fill", "black");
}
var bigRectContainer = svgContainer.append("g");
svgContainer.selectAll("rect").on("click", function () {
var littleRect = d3.select(this);
console.log(littleRect)
var bigRect = bigRectContainer.selectAll("rect")
.data(littleRect)
.enter()
.append("rect");
});
请告诉我我犯了哪个错误......
答案 0 :(得分:11)
我不完全确定你要对你发布的代码做什么,但我认为重复整个SVG节点很有意思。事实证明,使用selection#html
很容易 - 这在SVG节点上不起作用,但 在其容器上工作,因此克隆整个节点很容易:< / p>
function addAnother() {
var content = d3.select(this.parentNode).html();
var div = d3.select('body').append('div')
.html(content);
div.selectAll('svg').on('click', addAnother);
}
svg.on('click', addAnother);
见working fiddle here。请注意,这仅在SVG节点是其父节点的唯一子节点时才有效 - 否则,您可能需要以某种方式将其包装。
答案 1 :(得分:2)
D3不提供克隆功能,可能是因为DOM元素(包括SVG节点)上已经存在本地cloneNode方法。
此方法包括一个布尔参数来深度复制(即复制所有后代),而不是仅仅克隆它所调用的节点。您可能希望执行类似bigRectContainer.node().cloneNode(true)
的操作来复制矩形的整个DOM分支。