我试图在 g 元素中创建的每个 svg 元素中嵌套一个单独的矩形,但我似乎无法让它工作。
这是我的代码+ Plnk;
var bar = g.selectAll(".barContainer")
.data(thisData.labels)
.enter()
bar
.append("svg")
.attr("class", "barContainer")
bar
.insert('rect')
.attr('width', function(d) {
console.log(d)
return d.value
})
.attr('height', 20)
.attr('x', 0)
.attr('y', 0)
目前,DOM 在同一级别上显示矩形和容器类,因为我想将矩形嵌套在每个容器内。
我尝试了一些方法,但似乎无法破解它,我希望有人能指出我正确的方向?
谢谢
最佳答案
您有一个 'g'
元素,您可以将 svg
附加到该元素,然后还将该矩形附加到 'g'
上。您想要将 rect
附加到您创建的 svg
元素。像这样的事情:
var bar = g.selectAll(".barContainer")
.data(thisData.labels)
.enter()
var barRectSVG = bar
.append("svg")
.attr("class", "barContainer")
barRectSVG
.insert('rect')
.attr('width', function(d) {
console.log(d)
return d.value
})
.attr('height', 20)
.attr('x', 0)
.attr('y', 0)
更新了plnkr:http://plnkr.co/edit/WYbjT7ekjUuopzs0H9Pi?p=preview
关于javascript - 使用 d3 将多个矩形嵌套在多个 svg 容器中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38971536/