D3.js橫向條形圖和來自json文件的數據

我已經使用d3.js創建了一個水平條形圖，數據也僅在js文件中。D3.js橫向條形圖和來自json文件的數據

但現在我想有一個單獨的json文件，從那裏我需要檢索數據並在js文件中使用。

我已經嘗試過，但無法從json文件訪問數據。

這是代碼。

的Html

<head>  
<title>Enjalot's Bar</title> 

<script src="d3.v3.min.js"></script> 
</head>

的JavaScript

<script type="text/javascript"> 

var data= [{"label":"1990", "value":16}, 
     {"label":"1991", "value":56}, 
     {"label":"1992", "value":7}, 
     {"label":"1993", "value":60}, 
     {"label":"1994", "value":22} 
     ]; 

    var data_max = 60, 
    num_ticks = 6, 

    left_margin = 60, 
    right_margin = 60, 
    top_margin = 30, 
    bottom_margin = 0; 


    var w = 200,      //width 
    h = 200,      //height 
    color = function(id) { return '#00b3dc' }; 

    var x = d3.scale.linear() 
    .domain([0, data_max]) 
    .range([0, w - (left_margin + right_margin) ]), 
    y = d3.scale.ordinal() 
    .domain(d3.range(data.length)) 
    .rangeBands([bottom_margin, h - top_margin], .5); 


var chart_top = h - y.rangeBand()/2 - top_margin; 
var chart_bottom = bottom_margin + y.rangeBand()/2; 
var chart_left = left_margin; 
var chart_right = w - right_margin; 


var vis = d3.select("body") 
    .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
    .append("svg:g") 
     .attr("id", "barchart") 
     .attr("class", "barchart") 

var rules = vis.selectAll("g.rule") 
    .data(x.ticks(num_ticks)) 
.enter() 
    .append("svg:g") 
    .attr("transform", function(d) 
      { 
      return "translate(" + (chart_left + x(d)) + ")";}); 
rules.append("svg:line") 
    .attr("class", "tick") 
    .attr("y1", chart_top) 
    .attr("y2", chart_top + 4) 
    .attr("stroke", "#939597"); 

rules.append("svg:text") 
    .attr("class", "tick_label") 
    .attr("text-anchor", "middle") 
    .attr("y", chart_top + 3) 
    .attr("fill","#939597") 
    .attr("font-size","0.667em") 
    .text(function(d) 
    { 
    return d; 
    }); 
var bbox = vis.selectAll(".tick_label").node().getBBox(); 
vis.selectAll(".tick_label") 
.attr("transform", function(d) 
     { 
     return "translate(0," + (bbox.height) + ")"; 
     }); 

var bars = vis.selectAll("g.bar") 
    .data(data) 
.enter() 
    .append("svg:g") 
     .attr("class", "bar") 
     .attr("transform", function(d, i) { 
       return "translate(0, " + y(i) + ")"; }); 

bars.append("svg:rect") 
    .attr("x", right_margin) 
    .attr("width", function(d) { 
      return (x(d.value)); 
      }) 
    .attr("height", y.rangeBand()) 
    .attr("fill", color(0)) 
    .attr("stroke", color(0)); 


//Labels 
var labels = vis.select("g.bar") 
    .append("svg:text") 
     .attr("class", "label") 
     .attr("x", 0) 
     .attr("text-anchor", "right") 
     .attr("transform", "rotate(270)") 
     .attr("y", 40) 
    .attr("x", -55) 
     .attr("dy", ".71em") 
     .text("Depts") 
     .style({"text-anchor":"end","font-size":"0.667em","fill":"#939597"}); 

var bbox = labels.node().getBBox(); 



labels = vis.selectAll("g.bar") 
    .append("svg:text") 
    .attr("class", "value") 
    .attr("fill","#fff") 
    .attr("font-size","0.667em") 
    .attr("x", function(d) 
      { 
      return 65; 
      }) 
    .attr("text-anchor", "start") 
    .text(function(d) 
    { 
    return "" + d.value + "%"; 
    }); 

bbox = labels.node().getBBox(); 
vis.selectAll(".value") 
    .attr("transform", function(d) 
    { 
     return "translate(0, " + (y.rangeBand()/2 + bbox.height/4) + ")"; 
    }); 

//Axes 
vis.append("svg:line") 
    .attr("class", "axes") 
    .attr("x1", chart_left) 
    .attr("x2", chart_left) 
    .attr("y1", chart_bottom) 
    .attr("y2", chart_top) 
    .attr("stroke", "#939597"); 
vis.append("svg:line") 
    .attr("class", "axes") 
    .attr("x1", chart_left) 
    .attr("x2", chart_right+120) 
    .attr("y1", chart_top) 
    .attr("y2", chart_top) 
    .attr("stroke", "#939597"); 

</script>

來源

2013-12-11 Preethi

你需要像這樣來訪問一個JSON文件

d3.json("path/to/file.json", function(error, json) { 
    // since this function is asynchronous, 
    // you can't access data outside it 
    // So do pass the json into the the function that needs it 
    if (error) return console.warn(error); 
    someFunc(json); 
}); 

function someFunc(data) { 
    .... 
}

閱讀本wiki對於x hr在D3中的請求。

來源

2013-12-11 10:24:38 dcodesmith

我試着用下面的代碼，但是如果我訪問數據它是未定義的。 var data = d3.json（「bardata.json」，function（error，data）{ data.forEach（function（d）{ d.frequency = + d.frequency; }）; }）; – Preethi

@ User1什麼是代碼片段？ – dcodesmith

我已經嘗試了上面的代碼，但獲取數據爲未定義。 – Preethi

D3.js橫向條形圖和來自json文件的數據

回答

相關問題