NVD3 및 데이터 변경

Question

몇 가지 데이터 시각화를 만들려고합니다. 차트를 변경하기 위해 드롭 다운 메뉴를 만드는 것입니다. 현재로서는 내 데이터가 html 파일에 코드화되어 있습니다. 내가 할 계획은 차트를 변경할 메뉴를 통해 호출 할 수있는 별도의 JSON 파일로 데이터를 이동하는 것입니다. 나는 this을 보았지만 CSV 파일 용입니다. JSON 파일의 경우 이와 비슷한 것이 있습니까?

<div id='chart57b8c4fde7' class='rChart nvd3'></div>  

<script type='text/javascript'> 
$(document).ready(function(){ 
     drawchart57b8c4fde7() 
    }); 
    function drawchart57b8c4fde7(){ 
     var opts = { 
     "dom": "chart57b8c4fde7", 
     "width": 725, 
     "height": 550, 
     "x": "NAME", 
     "y": "Total", 
     "group": "Type", 
     "type": "multiBarChart", 
     "id": "chart57b8c4fde7" 
     }, 
     data = [ 
     { 
     "NAME": "ONE", 
     "Type": "A", 
     "Total":  4 
     }, 
     { 
     "NAME": "TWO", 
     "Type": "A", 
     "Total":  2 
     }, 
     { 
     "NAME": "ONE", 
     "Type": "B", 
     "Total":  5 
     }, 
     { 
     "NAME": "TWO", 
     "Type": "B", 
     "Total":  5 
     } 
     ] 
    var data = d3.nest() 
     .key(function(d){ 
     return opts.group === undefined ? 'main' : d[opts.group] 
     }) 
     .entries(data) 

    nv.addGraph(function() { 
     var chart = nv.models[opts.type]() 
     .x(function(d) { return d[opts.x] }) 
     .y(function(d) { return d[opts.y] }) 
     .width(opts.width) 
     .height(opts.height) 

    d3.select("#" + opts.id) 
     .append('svg') 
     .datum(data) 
     .transition().duration(500) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 
    return chart; 
    }); 

    }; 
</script> 

Answer 1

당신은

다음

$.getJSON("data.js", function(json) { 
    console.log(json) 
}).done(function() { 
    console.log("json loaded"); 
}).fail(function() { 
    console.log("error loading json"); 
}); 

인 JSON을 어떻게 Load External Resources

희망의 목록을 읽어

d3.json("data.js", function(data) { 
    alert(data.length) 
}); 

을 D3S 'JSON 리더를 사용 또는 jQuery를 사용할 수 있습니다 도움이됩니다.