D3 - 在SVG中附加SVG

Question

我一直试图在SVG中添加一组SVG。所以，在SVG内部，我想创建一个函数来制作情节。但是，这不符合我的预期，因为内部SVG根据我的规范没有维度。所以，我想知道出了什么问题。

svg_g_g = svg_g.append("g")
                    .selectAll("g")
                    .data(data)
                    .enter()
                    .append("g")
                    .attr("transform", function(d) {
                        return "translate(" + xScale(d.key) + "," + lift + ")"
                    })
                    .append("svg")
                    .attr("width", function(d) { return xScale(d.key) })
                    .attr("height", height)

                    .append("line")
                    .style("stroke", "black")
                    .attr("x1", function(d) { return xScale(d.key) })
                    .attr("y1", height-100)
                    .attr("x2", function(d) { return xScale(d.key) + 50 } )
                    .attr("y2", height-100);

这是输出。

如果我将数据绑定到g（不附加svg），结果看起来更有希望。

svg_g_g = svg_g.append("g");
        svg_g_g.selectAll("line")
                    .data(data)
                    .enter()
                    .append("line")
                    .style("stroke", "black")
                    .attr("x1", function(d) { return xScale(d.key) })
                    .attr("y1", height-100)
                    .attr("x2", function(d) { return xScale(d.key) + 50 } )
                    .attr("y2", height-100);

这就是结果。 （注意：在这种情况下显示了这些线条）

任何帮助将不胜感激。

编辑我打算做的是想创建一个盒子图，我在这里使用了“iris”数据集，因为我可以将它与其他数据可视化库进行比较。当前状态我试图为每个类别创建一个大小相等的SVG，我将用它来包含盒子图。换句话说，在我可以成功创建内部SVG之后，我将调用一个函数来从那里创建绘图。有点想法迈克做了here。