d3實現可在firefox / chrome上運行，但不能在iPad上運行

Question

所以我有一些使用d3.json通過HTTP get請求獲取一些json並將其可視化的源代碼...它在chrome和firefox上運行良好，但是當我嘗試在safari或chrome的移動版本上運行它時，它壞了。 在iOS野生動物園上運行時，js在遇到空的“ d”對象時會發現空類型錯誤...

<em><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v2.js"> 
</script>

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="syntax.css" type="text/css">
<link rel="stylesheet" href="pack.css" type="text/css">

</head>


<body>


    <div id="chart"></div>
    <svg width="960" height="960" class="pack">
    <script type="text/javascript">


    setInterval(function(){
        var width = 960,
            height = 960,
            format = d3.format(",d");

        var pack = d3.layout.pack()
            .size([width - 4, height -4])
            .value(function(d) { return d.size; });

        var vis = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "pack")
            .append("g")
            .attr("transform", "translate(2, 2)");

        d3.json("http://localhost:8080/cluster", function(json) {       

                //do visualization
                var node = vis.data([json]).selectAll("g.node")
                 .data(pack.nodes)
                 .enter().append("g")
                 .attr("class", function(d) {return d.children ? "node" : "leaf node" ;})
                 .attr("transform", function(d) {return "translate(" + d.x + "," + d.y +")"; });

                node.append("title")
                    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

                node.append("circle")
                .attr("r", function(d) { return d.r; });

                node.filter(function(d) { return !d.children; }).append("text")
                .attr("text-anchor", "middle")
                .attr("dy", ".3em")
                .text(function(d) { return d.name.substring(0, d.r / 3); });

        }
);
                //log
    }, 1000);





        </script>
</body>
</html>

</em>

這就是我使用碼頭設置服務器的方式...

public static void main(String[] args) {
    configureLogger();
    Server server = new Server(PORT);

    ResourceHandler resource_handler = new ResourceHandler();
    resource_handler.setDirectoriesListed(true);
    resource_handler.setWelcomeFiles(new String[]{ "index.html" });

    resource_handler.setResourceBase("src/resources");
    ServletHandler handler = new ServletHandler();
    handler.addServletWithMapping(VisServlet.class, "/cluster");

    HandlerList handlers = new HandlerList();
    handlers.setHandlers(new Handler[] { resource_handler, handler, new DefaultHandler() });
    server.setHandler(handlers);        


    try {
        server.start();
        log.info("Starting server on port " + PORT + "...");
        server.join();
    } catch (Exception ex){
        System.exit(-1);
    }

}

Answer 1

您似乎在<script>標記之前有一行HTML，這會阻止腳本執行。

<svg width="960" height="960" class="pack">

刪除它，它應該可以工作（在iOS 5.1上測試）。

請注意，此<svg>標記缺少其xmlns命名空間（ http://www.w3.org/2000/svg ），因此無論如何都會引起問題。

d3實現可在firefox / chrome上運行，但不能在iPad上運行

問題描述

1 個解決方案

解決方案1
0 已采納 2012-07-28 15:15:21

d3實現可在firefox / chrome上運行，但不能在iPad上運行

問題描述

1 個解決方案

解決方案1 0 已采納 2012-07-28 15:15:21

解決方案1
0 已采納 2012-07-28 15:15:21