Javascript D3-在SVG中附加SVG

我一直在尝试在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之后，我将调用一个函数，从那里生成绘图。迈克也有同样的想法

在不知道您的意图的情况下很难回答，但从一眼看，我猜

.attr（“宽度”，函数（d）{return xScale（d.key）}

不能按预期工作，可能应该类似于

.attr（'width'，nestedWidth）

。看起来您正在堆叠转换（通过多次调用

xScale（d.key）

），这可能也不是有意的。@Steve感谢您的输入。这有点奏效，但还没有达到我想去的地方。请看更新，如果它能让我更清楚地了解我打算做什么。