html - 滚动条未出现在 SVG 元素中

Question

我使用以下代码将 SVG 动态添加到我页面上的 div:

var svg = d3.select("#svgholder").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .style("overflow", "scroll");

如果有人关心，这里是我定义相关变量的地方:

var margin = {top: 20, right: 180, bottom: 20, left: 180},
              width = 960 - margin.right - margin.left,
              height = 500 - margin.top - margin.bottom;

和占位符 div:

 <div style="background-color:white;" id="svgholder">

我可以很好地向 div 添加滚动条，但这只允许我在静态大小的 SVG 中移动。当我将对象放入 SVG 中时，它太大了并且在最远的边缘处仍然被切断。

我尝试使用 .style("overflow", "scroll"); 位向 svg 本身添加滚动条，但没有任何效果。

我是不是漏掉了什么奇怪的东西？

Answer 1

您可以使用缩放来翻译 SVG 的内容

var svg = d3.select("svg"),
    g = svg.append("g");

// add stuff to g

var zoom = d3.zoom()
   .scaleExtent([1, 1])
   .translateExtent([[0, 0], [sizeXObject, sizeYObject]])
   .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
    g.attr("transform", d3.event.transform);
}

如果你需要有边距，你需要添加一个剪辑路径 rect 到 g。