3

我正在使用 d3 生成一个 svg 可视化，我希望以响应的方式对其容器进行缩放。我可以直接创建一个以这种方式运行的 SVG 元素，但是当我编写一个生成相同 SVG 标记的 d3 脚本时，它不会缩放。

这是生成 SVG 元素的 d3 代码：

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(36)
    .outerRadius(48);

var svg = d3.select('#d3').append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .attr('viewbox', '0, 0, 100, 100')
            .attr('preserveAspectRatio', 'xMidYMid')
            .append('g')
                .attr('transform', 'translate(50, 50)');

var loop = svg.append('g')
    .attr('class', 'percent-wheel');

loop.append('path')
    .attr('class', 'background')
    .attr('d', arc.endAngle(2 * Math.PI));

这是生成的 SVG 标记，在静态插入 DOM 时可以正确缩放：

<div id="d3" class="container">   
  <svg preserveAspectRatio="xMidYMid" viewbox="0, 0, 100, 100" height="100%" width="100%">
    <g transform="translate(50, 50)">
      <g class="percent-wheel">
        <path d="M0,48A48,48 0 1,1 0,-48A48,48 0 1,1 0,48M0,36A36,36 0 1,0 0,-36A36,36 0 1,0 0,36Z" class="background"></path>
      </g>
    </g>
  </svg>
</div>

你可以在这里看到一个活生生的例子：http: //jsfiddle.net/HMQGq/

谁能解释通过 d3 创建 svg 导致这种情况发生的不同之处？

4

1 回答 1

1

问题是属性定义中的拼写错误——它应该是viewBox而不是viewbox.

于 2013-11-18T18:01:11.450 回答