d3实现可在firefox / chrome上运行，但不能在iPad上运行

Question

So I have some source code that uses d3.json to fetch some json with an HTTP get request and visualize it...it works perfectly fine on chrome and firefox, but when I try to run it on a mobile verison of safari or chrome, it breaks. 所以我有一些使用d3.json通过HTTP get请求获取一些json并将其可视化的源代码...它在chrome和firefox上运行良好，但是当我尝试在safari或chrome的移动版本上运行它时，它坏了。 When running on iOS safari, the js finds a null type error when encountering a null "d" object... 在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>

This is how I set up my server using jetty... 这就是我使用码头设置服务器的方式...

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

You seem to have a stray line of HTML just before the <script> tag which is blocking the script from executing. 您似乎在<script>标记之前有一行HTML，这会阻止脚本执行。

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

Remove this, and it should work (tested on iOS 5.1). 删除它，它应该可以工作（在iOS 5.1上测试）。

Note that this <svg> tag missing its xmlns namespace ( http://www.w3.org/2000/svg ) and so would have caused issues anyway. 请注意，此<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