小编dsa*_*say的帖子

现在我用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; …