Javascript 使用d3在多个svg容器中嵌套多个矩形？

我试图在g元素中创建的每个svg元素中嵌套一个单独的rect，但似乎无法让它工作

这是我的代码+Plnk

目前DOM在同一级别上显示rect和container类，我希望将rect嵌套在每个容器中

我尝试过一些东西，但似乎无法破解，我希望有人能给我指出正确的方向

---

谢谢

您有一个

'g'

元素，可以将

svg

附加到该元素，然后还可以将rect附加到

'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:

您有一个

'g'

元素，可以将

svg

附加到该元素，然后还可以将rect附加到

'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:

谢谢！我不能用css设置每个svg“.barContainer”的样式，这样这些条就不会出现在彼此的顶部，这是正常的吗？设置svg元素的样式与设置div等的样式不同。您必须转换元素来定位它。看，谢谢！我不能用css设置每个svg“.barContainer”的样式，这样这些条就不会出现在彼此的顶部，这是正常的吗？设置svg元素的样式与设置div等的样式不同。您必须转换元素来定位它。看见