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的宽度。