4
応答性の高いSVGを作成しようとしています。あなたはjsfiddleバージョンにパネルの境界を調整した場合は、円は適切にサイズにスケーリング見ることができます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
：私は正常例のSVGを作成しました。
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はまったく同じですが、2番目の例では、（jsfiddleを参照）が正しく動作しません。
私がブラウザのインスペクタを使用してviewBox属性の4つの数字のいずれかを変更すると、その動作はすぐに正常に動作します。
思考？
\私が使用している場合* headdesk \ *、 – Andrew
奇妙なありがとうHTML埋め込みSVGのすべての小文字 'viewbox'はうまくいきます。だから何とかそれは大文字と小文字の区別を課しているd3だ... – Andrew
私は同じ問題を抱えていた。私の目だけが大文字と小文字を区別していれば。 – mbomb007