1

所以我有一些源代码使用 d3.json 通过 HTTP 获取请求获取一些 json 并将其可视化......它在 chrome 和 firefox 上运行良好，但是当我尝试在 safari 或 chrome 的移动版本上运行它时，它打破了。在iOS safari上运行时，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);
    }

}
4

1 回答 1

0

<script>您似乎在阻止脚本执行的标记之前有一行 HTML 。

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

删除它，它应该可以工作（在 iOS 5.1 上测试）。

请注意，此<svg>标记缺少其xmlns命名空间 ( http://www.w3.org/2000/svg)，因此无论如何都会导致问题。

于 2012-07-28T15:15:21.073 回答