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

Creating scrollbars with SVG and d3.js

提问by dsabsay

Right now I've used d3 to create several "boxes" that are merely SVG rectangles with text:

现在我已经使用 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});

Now what I'd like to do is add scrollbars to each box when the text is outside the bounds of the box. I've seen a couple examples that created a divand used CSS to handle the overflow. However, I will have multiple (variable) boxes and I'm not sure how to go about this.

现在我想做的是当文本超出框的边界时向每个框添加滚动条。我看过几个例子，它们创建了一个div并使用 CSS 来处理溢出。但是，我将有多个（可变）框，我不确定如何处理。

Any suggestions?

有什么建议？

-- UPDATE --

- 更新 -

I was able to get scrollbars to appear by appending svg elements to a div that controls scrolling with CSS styles.

我能够通过将 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%;
}

However, the scrolling seems to be affected only by the width and height percentages of the svg element rather than the rect element that is drawn in the div. In other words, if the rectangle is too large, you still can not scroll to see all of it, unless you increase the width and height of the svg element.

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

Is there a way I can have the div scroll based on what is drawn inside of it? Or should I try to somehow calculate and change the width and height attributes of the svg element?

有没有办法让div滚动基于里面绘制的内容？或者我应该尝试以某种方式计算和更改 svg 元素的宽度和高度属性？

view the code here

在此处查看代码

回答by ElChiniNet

Try to add the viewBox svg property:

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

提琴手