如何向服务请求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数据？

回答

相关问题