d3 구현은 firefox/chrome에서는 작동하지만 iPad는 작동하지 않습니다.

그래서 d3.json을 사용하는 일부 소스 코드를 사용하여 HTTP 요청과 함께 json을 가져 와서 시각화합니다. Chrome과 Firefox에서 완벽하게 작동하지만 사파리 나 크롬의 모바일 버전에서 실행하려고하면 깨집니다. iOS의 사파리에서 실행하면 널 (null) "D"개체가 발생하면, JS는 ... d3 구현은 firefox/chrome에서는 작동하지만 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

localhost가 모바일 버전에서 다른 것을 의미하는지 궁금합니다. yr IP 주소를 사용하려고합니다. – Andrew

내 IP 주소를 사용하고 있는데 모바일 브라우저가 JSON을 수신하지만 svg 요소를 생성하려고 할 때 null SVG 속성이 발생합니다 ... – capkutay

스크립트가 실행되지 않도록 막는 <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에서 실행될 때 마지막으로 한 가지 오류가 발생했습니다. 사파리 ... 라인 6081의 자바 스크립트 오류 유형 오류 : 표현식 'd'[null]의 결과가 객체가 아닙니다. 동일한 코드가 내 macbook의 safari/firefox/chrome에서 오류없이 실행되지만 내 iPad에서 실행할 때 유형 오류가 발생합니다. 여전히 iOS의 오래된 버전을 실행 중입니다. 문제가 될 수 있습니까? ? flare.json (d3.json의 github에서 제공)을 전달하더라도 동일한 오류가 발생하므로이 문제는 내 json의 형식과 관련이 없음을 확인했습니다. – capkutay

사용중인 코드를 게시 할 수 있습니까? 내가 위의 코드를 문제의 라인없이 테스트 했더니 괜찮습니다. 교차 출처 보안 정책으로 인해 JSON은 페이지 자체와 동일한 도메인 및 포트에서 제공되어야합니다. –

내 서버 구성을 게시했습니다. json과 소스가 동일한 서버의 동일한 포트에서 전송되므로 문제가되지 않습니다. – capkutay

d3 구현은 firefox/chrome에서는 작동하지만 iPad는 작동하지 않습니다.

답변

관련 문제