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和height属性。and标签上的andwidth和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 回答