javascript – 使用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",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元素的宽度和高度属性？

view the code here

解决方法

尝试添加viewBox svg属性：

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

jsfiddle