Javascript d3生成的SVG没有响应_Javascript_D3.js_Svg_Responsive Design

Javascript d3生成的SVG没有响应

javascript d3.js svg responsive-design

Javascript d3生成的SVG没有响应,javascript,d3.js,svg,responsive-design,Javascript,D3.js,Svg,Responsive Design,我正在尝试创建一个响应性SVG。我已成功创建了一个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。我已成功创建了一个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>

如果在JSFIDLE版本中调整面板边界，您可以看到圆圈的大小适当地缩放

我想使用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>


变量宽度=600，高度=200；
var svg=d3.选择（“容器”）.追加（“svg”）
.attr（“id”、“图表”）
.attr（“保存Aspectratio”、“xMidYMid”）
.attr（“视图框”、“0 0”+宽度+高度）；
svg.append（“圆”）
.attr（“r”、“100”）
.attr（“cx”、“100”）
.attr（“cy”、“100”）
.attr（“填充”、“红色”）；
svg.append（“圆”）
.attr（“r”、“100”）
.attr（“cx”、“300”）
.attr（“cy”、“100”）
.attr（“填充”、“蓝色”）；
svg.append（“圆”）
.attr（“r”、“100”）
.attr（“cx”、“500”）
.attr（“cy”、“100”）
.attr（“填充”、“绿色”）；

据我所知，呈现的HTML完全相同，但第二个示例无法正常工作（请参阅JSFIDLE）

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

想法？

视图框

有大写字母B：

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

现在检查你的小提琴：

以下是文档：

*headdesk*非常感谢，奇怪的是，如果我在HTML嵌入的SVG中使用所有小写的

viewbox

，它就可以正常工作。所以不知怎的，d3对大小写敏感…我也有同样的问题。要是我的眼睛能区分大小写就好了。