SVG D3 图像调整大小问题答案

【问题标题】：SVG D3 image resize issueSVG D3 图像调整大小问题
【发布时间】：2017-11-29 01:19:58
【问题描述】：

我有一个使用 d3 创建的 SVG 图像。我想在它的父 div 容器中包含 svg 图像。但是，svg 超出了父 div。以下是我的代码：

    <div id="test" style="{width: 500px; height:500px;}">
    <svg></svg>
    </div>
     <script>
    var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height"),
            node,
            link;

        svg.append('defs').append('marker')
            .attrs({'id':'arrowhead',
                'viewBox':'-0 -5 10 10',
                'refX':13,
                'refY':0,
                'orient':'auto',
                'markerWidth':13,
                'markerHeight':13,
                'xoverflow':'visible'})

            .append('svg:path')
            .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
            .attr('fill', '#999')
            .style('stroke','none');

</script>

我的 d3 图表超出了父“测试”div。如何限制父容器内的 SVG 图。

【问题讨论】：

您使用的是哪个版本的 d3？我无法让您的代码在没有错误的情况下运行。尝试在 JSBin 或类似的东西中重新创建它。另外，你在看 IE 中的输出吗？ IE 在 SVG 样式方面存在问题，但可以修复。

标签： javascript jquery html d3.js svg

【解决方案1】：

不知道从哪里开始诚实。您提供的代码 sn-p 是自己的，有很多问题阻止它在我这边做任何事情。

我希望this 能给你一个关于如何将 svg 缩放到父容器尺寸的基本概念：

html

<div id="test">
    <svg></svg>
</div>

css

#test {
  width: 500px;
  height: 500px;
}

svg { 
  width: 100%;
  height: 100%;
}

var svg = d3.select("svg");
svg.attr('viewBox', '-0 -5 10 10');
svg.append('svg:path')
  .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
  .attr('fill', '#999')
  .style('stroke','none');

svg 元素本身的大小可以通过 CSS 使用绝对或相对单位进行设置。

viewBox 属性定义了 SVG 内部坐标系的边界。要使矢量图像的内容为“全尺寸”，它不应大于包含 SVG 的所有元素所需的大小。

【讨论】：