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

回答

相關問題