javascript - 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 之后，我将调用一个函数从那里制作绘图。有点像迈克在这里做的想法。

标签： javascriptd3.jssvg