使用 SVG 和 d3.js 创建滚动条

现在我已经使用 d3 创建了几个“盒子”，它们只是带有文本的 SVG 矩形：

var canvas = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 500);


//specifies drawing area for each box
var boxes = canvas.selectAll("rect")
    .data(classData)
    .enter();

boxes.append("rect")
        .attr("width", boxWidth)
        .attr("height", boxHeight)
        .attr("fill", boxColor)
        .attr("x", function (d, i) { return i * 2 * boxWidth });


text.append("text")
        .attr("fill", textColor)
        .attr("x", function (d, i) 
              { return i * 2 * boxWidth + 5 })
        .attr("y", 20)
        .style("width", "20px")
        .style("overflow-x", "scroll")
        .text(function(d) {return d.name});

现在我想做的是当文本超出框的边界时向每个框添加滚动条。我见过几个创建了div并使用 CSS 来处理溢出。但是，我将有多个（可变）框，我不知道如何处理这个问题。

有什么建议么？

- 更新 -

我可以通过将 svg 元素附加到使用 CSS 样式控制滚动的 div 来显示滚动条。

.container {
    height: 225px;
    width: 175px;
    border:2px solid #000;
    overflow-y: scroll;
    overflow-x: hidden;
}

svg {
    display: block;
    width: 200%;
    height: 200%;
}

但是，滚动似乎仅受 svg 元素的宽度和高度百分比的影响，而不是受 div 中绘制的 rect 元素的影响。换句话说，如果矩形太大，您仍然无法滚动查看全部内容，除非增加 svg 元素的宽度和高度。

有没有办法让 div 根据其内部绘制的内容进行滚动？或者我应该尝试以某种方式计算和更改 svg 元素的宽度和高度属性？

在这里查看代码 https://jsfiddle.net/azkqyjp6/4/

尝试添加 viewBox svg 属性：

var rectangle = container.append("svg")
    .attr("viewBox", "0,0,150,420")
    .append("rect")
    .attr("width", 150)
    .attr("height", 420)
    .attr("fill", "steelblue")
    .attr("x", 0)
    .attr("y", 0);

jsfiddle http://jsfiddle.net/elchininet/n53crtez/