javascript - 使用 d3 将多个矩形嵌套在多个 svg 容器中？

Question

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

这是我的代码+ Plnk；

Plunker

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 在同一级别上显示矩形和容器类，因为我想将矩形嵌套在每个容器内。

我尝试了一些方法，但似乎无法破解它，我希望有人能指出我正确的方向？

谢谢

Answer 1

您有一个 '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