파일의 외부 Json 데이터를 사용하여 d3.js 원형 차트 표시

외부 JSON 파일을 변경하면 동적으로 업데이트되는 원형 차트를 디자인해야합니다. 꽤 간단한 코드를 작성했지만 어떻게 든 크롬 페이지에 차트가 렌더링되지 않습니다. Uncaught 오류 및 "데이터"정의가 누락 된 것으로 보입니다. 나는 d3와 Javascript에 상당히 익숙하다. 나는이 코드를 디버깅/수정하는 데 도움이 필요하다. My Json 파일은 d3.json 메서드 호출에 의해 호출됩니다. json 파일의 x는 이름이고 y는 값입니다. x, y는 내 이름이됩니다 : 값 쌍.파일의 외부 Json 데이터를 사용하여 d3.js 원형 차트 표시

<!DOCTYPE html> 
<meta charset="utf-8"> 

<body> 
    <script src="../lib/d3.v3.min.js"></script> 
    <script type="text/javascript"> 

     var width = 960; 
     var height = 500; 
     var radius = 400; 

     var outerRadius = radius; 
     var innerRadius = 0; 

     var pie = d3.layout.pie().sort(null).y(function(d) { 
      return d.y; 
     }); 

     var color = d3.scale.category10(); 

     var svg = d3.select("body").append("svg").attr("width", width).attr(
       "height", height).append("g").attr("transform", 
       "translate(" + width/2 + "," + height/2 + ")"); 

     var g = svg.selectAll(".arc").data(pie(data)).enter().append("g").attr(
       "class", "arc"); 

     var arc = d3.svg.arc().outerRadius(outerRadius) 
       .innerRadius(innerRadius); 

     var labelArc = d3.svg.arc().outerRadius(radius - 40).innerRadius(
       radius - 40); 

     d3.json("data.json", function(error, data) { 
      data.forEach(function(d) { 

       d.x = d.x; 

       d.y = d.y+d.y; 

       x.domain(data.map(function(d) { 
        return d.x; 
       })); 

       y.domain([ 0, d3.max(data, function(d) { 
        return d.y; 
       }) ]); 

       g.append("path") 

       .attr("fill", function(d, i) { 
        return color(i); 
       }).attr("d", arc); 

       g.append("text").attr("transform", function(d) { 
        return "translate(" + labelArc.centroid(d) + ")"; 
       }).attr("text-anchor", "middle").text(function(d) { 
        return d.data.x; 
       }); 
      }) 
     }); 
    </script>

출처

2016-10-06 Madhur Malu

이 data.json 파일의 위치는 어디입니까? data.json 파일에 대한 상대 경로를 제공하거나이 html을 같은 폴더에 두어야합니다. –

data.json 파일은이 HTML 파일과 같은 폴더에 있습니다. –

코드 구조와 관련하여 논리적 인 문제가 있습니다 ... 데이터 변수가 액세스 할 수없는 d3.json 외부에서 사용되는 것과 같습니다. 아래의 접근 방법을 참조하십시오 ... 작동해야하며 테스트하지 않았습니다. 이 코드를 실행하는 데 문제가있는 경우 알려주십시오

var width = 960; 
    var height = 500; 
    var radius = 400; 

    var outerRadius = radius; 
    var innerRadius = 0; 

    var pie = d3.layout.pie().sort(null).y(function(d) { 
     return d.y; 
    }); 

    var g, arc, labelArc; 

    var color = d3.scale.category10(); 

    var svg = d3.select("body").append("svg").attr("width", width).attr(
      "height", height).append("g").attr("transform", 
      "translate(" + width/2 + "," + height/2 + ")"); 



    d3.json("data.json", function(error, data) { 

     x.domain(data.map(function(d) { return d.x; })); 

     y.domain([ 0, d3.max(data, function(d) { return d.y; }) ]); 

     g = svg.selectAll(".arc") 
        .data(pie(data)) 
        .enter() 
        .append("g") 
        .attr("class", "arc"); 

     arc = d3.svg.arc() 
        .outerRadius(outerRadius) 
        .innerRadius(innerRadius); 

     labelArc = d3.svg.arc() 
         .outerRadius(radius - 40) 
         .innerRadius(radius - 40); 

     g.append("path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .attr("d", arc); 

     g.append("text") 
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")";}) 
     .attr("text-anchor", "middle").text(function(d) { return d.data.x; });   

    });

출처

2016-10-07 09:09:29

파일의 외부 Json 데이터를 사용하여 d3.js 원형 차트 표시

답변

관련 문제