svg - d3中的垂直滚动条

Question

我正在尝试使用 d3 制作页面，以便页面的上半部分可能会溢出并且可能需要滚动条，但下半部分不需要。我需要两个单独的 svg 元素来完成这个吗？如果是这样，我需要使用 css 属性来显示滚动条。我尝试在 stackoverflow 上查找类似的问题，但它们需要使用 jQuery，如果可能，我会尽量避免。

所以这是我正在尝试做的一个例子：

http://jsfiddle.net/agANT/3/

在此我绘制了高度为 300px 的绿色矩形，因此它从第一个 svg 延伸出来，但没有出现滚动条。

var svg = d3.select("body")
         .append("svg")
         .attr("width", 400)
         .attr("height", 200);

var svg2 = d3.select("body")
          .append("svg")
          .attr("width", 400)
          .attr("height", 200);

svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 300)
    .attr("fill", "green");

svg2.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 200)
    .attr("fill", "gray");

谢谢！

Answer 1

您需要两个单独的 SVG 来完成此操作。您不需要使用任何 CSS，您需要做的就是适当地设置顶部 SVG 的宽度。