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

Question

现在我使用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中的矩形元素的影响。换句话说，如果矩形太大，除非增加svg元素的宽度和高度，否则仍然无法滚动查看所有内容。

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

在这里查看代码

- dsabsay

---

您需要向文档中添加div并将它们定位在svg上方。在div上设置overflow-y:scroll。 - Union find

@Incodeveritas 谢谢您的回复！我想我已经按照您在这里说的做了：jsfiddle.net/azkqyjp6/3 但我仍然有几个问题。1）矩形看起来比它应该的要小。为什么会发生这种情况，我该如何解决？2）当我增加矩形的高度时，它只是被裁剪了，实际上没有出现滚动条。我做错了什么？ - dsabsay

不，你不能使用矩形。你需要在body上附加div，并使用绝对/固定定位将它们放置在svg的顶部。 - Union find

你可以计算SVG元素的宽度和高度，以使滚动条正常工作。您需要将文本呈现为SVG而不是直接将其作为HTML添加到div中的原因是什么？ - brenzy

Answer 1

尝试添加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

- ElChiniNet