d3 implementation works on firefox/chrome, but not iPad

StackOverflow https://stackoverflow.com//questions/11696965

Frage

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. When running on iOS safari, the js finds a null type error when encountering a null "d" object...

<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);
    }

}
War es hilfreich?

Lösung

You seem to have a stray line of HTML just before the <script> tag which is blocking the script from executing.

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

Remove this, and it should work (tested on 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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top