D3.js 使用D3生成的SVG不';t scale-like看似相同的静态SVG内容
我正在用d3生成一个svg可视化,我希望以一种响应的方式对其容器进行缩放。我可以直接创建一个以这种方式运行的SVG元素,但当我编写一个生成相同SVG标记的d3脚本时,它无法伸缩 以下是生成SVG元素的d3代码:D3.js 使用D3生成的SVG不';t scale-like看似相同的静态SVG内容,d3.js,responsive-design,D3.js,Responsive Design,我正在用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
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>
您可以在此处看到一个实例:
有人能解释一下通过d3创建svg的不同之处吗?问题是属性定义中的一个输入错误——它应该是
viewBox
,而不是viewBox
我不确定是否理解您的意思。当我调整窗口大小时,两个圆圈都不会缩放。如果不清楚的话,很抱歉。一个圆已缩放到其包含元素(.container div)的大小,另一个没有。属性定义中有一个输入错误—它应该是viewBox
,而不是viewBox
。这很有趣—解决了我的问题—谢谢!。出于好奇:你知道为什么打字错误会在d3中导致问题,而不是在静态标记中吗?我的猜测是浏览器在解析页面时会“规范化”属性名称,而动态生成的内容不会出现这种情况,但我在这里真的只是猜测。