d3的实现工作在Firefox /铬，但不是iPad

所以我有一些源代码使用d3.json来获取一些JSON与HTTP获取请求，并可视化它......它在铬和Firefox上工作得很好，但当我尝试通过safari或chrome的移动版本运行它时，它会中断。当iOS上的Safari浏览器运行时，JS遇到空“d”对象时，发现一个空类型的错误...d3的实现工作在Firefox /铬，但不是iPad

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

}

来源

2012-07-27 capkutay

我不知道本地主机是否意味着移动版本有所不同？我会尝试使用年的IP地址。 – Andrew 2012-07-28 00:48:49

我使用我的IP地址，我的手机浏览器收到JSON，但是当试图产生svg元素时，它遇到空的SVG属性... – capkutay 2012-07-28 01:07:56

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

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

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

请注意，此<svg>标记遗漏了其xmlns命名空间（http://www.w3.org/2000/svg），因此无论如何都会引发问题。

来源

2012-07-28 15:15:21

所以我做了这些修改，并且我在iOS上运行时将其划分为最后一个错误safari ... 行6081上的Javascript错误类型错误：表达式'd'[null]的结果不是对象。相同的代码在我的macbook上safari/firefox/chrome运行时没有错误，但是当我在iPad上运行它时遇到了类型错误。我仍在运行iOS的过时版本......可以这么说？我证实这个问题与我的json格式不匹配，因为即使我传入flare.json（由d3.json的github提供），我也会得到相同的错误。 – capkutay 2012-07-30 02:34:32

你可以发布你使用的代码吗？我测试了上面的代码，没有违规行，它对我来说工作得很好。请注意，由于跨源安全策略，JSON必须从与页面本身相同的域和端口提供。 – 2012-07-30 09:53:30

我发布了我的服务器配置... json和源从同一个服务器上的相同端口发送，所以不应该是问题。 – capkutay 2012-07-30 19:22:05

d3的实现工作在Firefox /铬，但不是iPad

回答

相关问题