如何向服務請求d3數據？

我下面講如何使用D3創建圖表教程：http://bost.ocks.org/mike/bar/3/如何向服務請求d3數據？

讀取數據使用D3顯示我用：

d3.tsv("data.tsv", type, function(error, data) {

data.tsv是本地文件，但如何能我從URL讀取這些數據？

我想我需要使用一個Ajax請求：

$阿賈克斯（{ 網址：「\ DATA \」，方面：document.body的 }）

但由於其異步如何使用這個作爲d3的一部分？

更新：現在數據包在一個jQuery GET請求：

$.get("getData.do", function(data) { 
    d3.tsv.parse(data, type, function(error, data) {

這裏是數據的格式：

letter frequency 
test title 6 221 
test title 8 218

d3被不呈現條形圖和有沒有錯誤報告給控制檯。數據格式是正確的，因爲從文件讀取時圖表正確顯示。我能正確訪問數據嗎？

整個代碼：

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

    body { 
     font: 10px sans-serif; 
    } 

    .axis path, 
    .axis line { 
     fill: none; 
     stroke: #000; 
     shape-rendering: crispEdges; 
    } 


    .bar { 
     fill: steelblue; 
    } 

    .bar:hover { 
     fill: brown; 
    } 

    .x.axis path { 
     display: none; 
    } 

    .d3-tip { 
     line-height: 1; 
     font-weight: bold; 
     padding: 12px; 
     background: rgba(0, 0, 0, 0.8); 
     color: #fff; 
     border-radius: 2px; 
    } 

    /* Creates a small triangle extender for the tooltip */ 
    .d3-tip:after { 
     box-sizing: border-box; 
     display: inline; 
     font-size: 10px; 
     width: 100%; 
     line-height: 1; 
     color: rgba(0, 0, 0, 0.8); 
     content: "\25BC"; 
     position: absolute; 
     text-align: center; 
    } 

    /* Style northward tooltips differently */ 
    .d3-tip.n:after { 
     margin: -1px 0 0 0; 
     top: 100%; 
     left: 0; 
    } 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<script> 

    var margin = {top: 40, right: 20, bottom: 30, left: 40}, 
      width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

    var formatPercent = d3.format(".0%"); 

    var x = d3.scale.ordinal() 
      .rangeRoundBands([0, width], .1); 

    var y = d3.scale.linear() 
      .range([height, 0]); 

    var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

    var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .tickFormat(formatPercent); 

    var tip = d3.tip() 
      .attr('class', 'd3-tip') 
      .offset([-10, 0]) 
      .html(function(d) { 
       return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>"; 
      }) 

    var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.call(tip); 

    $.get("http://getFile", function(data) { 

    d3.tsv(data, type, function(error, data) { 
     x.domain(data.map(function(d) { return d.letter; })); 
     y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

     svg.append("text") 
       .attr("x", (width/2)) 
       .attr("y", 0 - (margin.top/2)) 
       .attr("text-anchor", "middle") 
       .style("font-size", "16px") 
       .style("text-decoration", "underline") 
       .text("Article Read Count"); 

     svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

     svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("Frequency"); 

     svg.selectAll(".bar") 
       .data(data) 
       .enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.letter); }) 
       .attr("width", x.rangeBand()) 
       .attr("y", function(d) { return y(d.frequency); }) 
       .attr("height", function(d) { return height - y(d.frequency); }) 
       .on('mouseover', tip.show) 
       .on('mouseout', tip.hide) 



    }); 

     function type(d) { 
      d.frequency = +d.frequency; 
      return d; 
     } 

    }); 



</script>

來源

2014-02-08 blue-sky

從任何地方獲取數據並使用'd3.tsv.parse（datastring）'。請參閱https://github.com/mbostock/d3/wiki/CSV#wiki-tsv_parse – Sacho

@Sacho謝謝，請參閱問題更新 –

您需要做的不僅僅是獲取數據和調用分析。所有解析都是將數據從TSV格式轉換爲JavaScript對象。從此，您需要繪製圖表座標軸，然後使用整個d3 select-> data-> enter-> append循環。我會用一些示例代碼發佈一個答案，但我實際上將從您鏈接的站點複製粘貼它。如果你真的在做所有這些，發佈你的代碼，以便人們可以檢查它有什麼問題。 – Sacho

d3.tsv包裝爲您的異步請求。也就是說，你可以將它傳遞給一個URL，它會創建一個AJAX請求，發送並解析它。

d3.tsv("http://www.example.com/data.tsv", function(error, data) { 
    // the code in here will be run when the asynchronous request finished 
    // the data parsed from the TSV will be available in data 
});

此外，不需要使用JQuery。如果您從代碼中刪除該調用，它應該可以正常工作。

來源

2014-02-08 13:55:22

是的，雖然我以前嘗試過，沒有得到迴應，也沒有顯示任何錯誤消息，但仍然有效。也許舊版本的頁面被緩存。謝謝。 –

如何向服務請求d3數據？

回答

相關問題