d3生成的SVG不响应

我正在尝试创建一个响应SVG。我已经成功地创建了一个例子SVG：d3生成的SVG不响应

<html xmlns:xlink="http://www.w3.org/1999/xlink"><head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head> 
    <body> 
    <div id="container"> 
     <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid" id="chart"> 
      <circle fill="red" cy="100" cx="100" r="100"></circle> 
      <circle fill="blue" cy="100" cx="300" r="100"></circle> 
      <circle fill="green" cy="100" cx="500" r="100"></circle> 
     </svg> 
    </div> 
</body></html>

https://jsfiddle.net/andrewsu/kombdqL2/4/

https://gist.github.com/andrewsu/d3ed340495a2f21a25f8f69dedb2096a

如果你在的jsfiddle版本调整面板边界，你可以看到圆圈大小比例适当。

我想用D3创建完全相同的SVG。

<html xmlns:xlink="http://www.w3.org/1999/xlink"><head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
    </head> 
    <body> 
    <div id="container"> 
    </div> 

    <script type="text/javascript"> 
     var width=600, height=200; 
     var svg = d3.select("#container").append("svg") 
     .attr("id","chart") 
     .attr("preserveAspectRatio", "xMidYMid") 
     .attr("viewbox", "0 0 "+ width + " " + height); 
     svg.append("circle") 
      .attr("r","100") 
      .attr("cx","100") 
      .attr("cy","100") 
      .attr("fill","red"); 
     svg.append("circle") 
      .attr("r","100") 
      .attr("cx","300") 
      .attr("cy","100") 
      .attr("fill","blue"); 
     svg.append("circle") 
      .attr("r","100") 
      .attr("cx","500") 
      .attr("cy","100") 
      .attr("fill","green"); 
    </script> 

</body></html>

https://jsfiddle.net/andrewsu/g1x3s2ny/5/

https://gist.github.com/andrewsu/bf0e7549934f93ac40a416dc17bb7b1e

尽可能靠近我可以告诉大家，呈现的HTML是完全一样的，但第二个例子不能正常工作（见的jsfiddle）。

奇怪的是，如果我使用我的浏览器的检查器来更改viewBox属性中的四个数字中的任何一个，则该行为立即按预期工作。

想法？

来源

2016-08-28 Andrew

viewBox有一个大写B：

.attr("viewBox", "0 0 "+ width + " " + height);

现在检查你的提琴：https://jsfiddle.net/on17ga9u/

下面是文档：https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

来源

2016-08-28 07:41:44

\ * headdesk \ *谢谢 – Andrew

奇怪的是，如果我使用在嵌入HTML的SVG中全部使用小写'viewbox'，它工作正常。所以不知何故，它是强加大小写敏感性的D3 ... – Andrew

我有同样的问题。如果只有我的眼睛区分大小写。 – mbomb007

d3生成的SVG不响应

回答

相关问题