NVD3和更改數據

我正在嘗試創建一些數據可視化。我想要做的是創建一個下拉菜單來更改圖表。截至目前，我的數據被編碼到html文件中。我打算做的是將數據移動到單獨的JSON文件中，這些文件可以通過將更改圖表的菜單調用。我看到了this，但它是用於CSV文件的。對於JSON文件有沒有類似的東西？NVD3和更改數據

<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>

來源

2013-09-26 user2340706

你可以使用D3s的JSON讀者

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

或者使用jQuery讀取JSON

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

下面是關於如何Load External Resources

希望列表它有助於。

來源

2013-09-26 08:33:30 shabeer90

NVD3和更改數據

回答

相關問題