Question

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

failure

万一有人在意，这里是我定义相关变量的地方：

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");

和占位符div：

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

我可以将滚动条添加到div中，但是这只能使我在静态大小的SVG周围移动。当我将对象放在SVG中时，它太大了，只是在最远的边缘处被切除。

我尝试使用<div style="background-color:white;" id="svgholder">位将滚动条添加到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。

滚动条未出现在SVG元素中

1 个答案: