2

SVG は Firefox 18 では機能しませんが、 Firebugを介して言う方が正確です。SVG 要素の値が変化しているのがわかりますが、画面には何も表示されません。

私が扱っているスニペットはhttp://jsfiddle.net/jcutrell/3C9JW/5/です。

コードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> - jsFiddle demo by jcutrell</title>

        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <style type="text/css"></style>

        <style type="text/css">
            body {
                background-color: #555;
                height: 5000px;
            }
        </style>

        <script type="text/javascript">//<![CDATA[
            $(function(){
                var svg = d3.select("#main");
                var line = d3.svg.line()
                .x(function(d) { return d[0]; })
                .y(function(d) { return d[1] + 200; })
                .interpolate("monotone");

                function init(){
                    var randData = [];
                    for (var i = 0; i < 8; i++){
                        randData.push([i*50, Math.random() * 100]);
                    }
                    svg.data([randData])
                       .append("svg:path")
                       .attr("d", line)
                       .attr("fill", "#444")
                       .attr("stroke", "#aaa")
                       .attr("stroke-width", 7);
                    svg.selectAll("circle")
                       .data(randData)
                       .enter().append("circle")
                       .attr("cx", function(d,i){ return d[0]; })
                       .attr("cy", function(d,i){ return d[1] + 200 })
                       .attr("fill", "#dfdfdf")
                       .attr("r", 10);
                    setInterval(refresh, 1200);
                }

                function refresh(){
                    var randData = [];
                    for (var i = 0; i < 8; i++){
                        randData.push([i*50, Math.random() * 100]);
                    }

                    svg.data([randData])
                        .select("path")
                        .transition()
                        .duration(500)
                        .attr("d", line);
                    svg.selectAll("circle")
                        .data(randData)
                        .transition()
                        .duration(500)
                        .attr("cy", function(d,i){ return d[1] + 200 });
                }
                init();
            });
        </script>
    </head>
    <body>
        <script src="http://d3js.org/d3.v2.js"></script>
        <svg id="main"></svg>
    </body>
</html>

ただし、Chromeでは完全に正常に動作します。

4

3 に答える 3

4

svg 要素の高さと幅を設定する必要があり、それが表示されます。

于 2013-05-21T12:55:48.413 に答える
1

ものを見るには、SVG 要素にwidthおよび属性が必要です。heightandwidthおよびタグのheightCSS プロパティ:htmlbody

<svg id="main" width="100%" height="100%"></svg>

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #555;
    width: 100%;
    height: 100%;
}
于 2013-05-21T12:59:25.257 に答える
0

CSS に簡単に追加します。

#main{
    width: 500px;
    height: 300px;
}

または、HTML に追加します。

style width=500px, height=300px
于 2014-05-07T07:39:51.590 に答える