API веб-данных Facebook и D3.JS

Question

Я пытаюсь создать простую панель инструментов с одной гистограммой, отображающей сообщение страницы, на которой я занимаю место по количеству акций. Я хотел бы построить это только с помощью Javascript и D3.JS. Я хочу использовать этот кусок кода:

FB.api(
    '/me', 
    'GET', 
    {"fields":"id,name,posts{name,shares}"}, 
    function(response) { 
     // Insert your code here 
    } 
); 

Оттуда я хочу, чтобы иметь возможность передавать данные в мой код D3.js. Как я могу это сделать ? Нужно ли использовать node.js или что-то в этом роде? Я могу получить данные, но знаю только, что я их печатаю в консоли javascript.

Я не хочу, чтобы кто-нибудь дал мне весь код, но подсказка, что мне делать, была бы замечательной.

спасибо,

Simon.

Answer 1

Надеюсь, это может вам помочь.

<fb:login-button autologoutlink="true"> 
    </fb:login-button> 
    <div> 
     <div id="canvas-svg"></div> 
    </div> 

    var simplebarchart = function (options) { 

    var __ = options || {}; 
    __.CHART_NAME = __.CHART_NAME || 'areachart'; 
    __.CONTAINER = __.CONTAINER || 'canvas-svg'; 
    __.WIDTH = __.WIDTH || 800; 
    __.HEIGHT = __.HEIGHT || 800; 
    __.MERGIN = __.MERGIN || {top: 20, right: 20, bottom: 30, left: 50} 

    __.Y_AXIS_LABEL = __.Y_AXIS_LABEL || "Count"; 
    __.X_DATA_PARSE = __.X_DATA_PARSE || function (d) { 
     return d; 
    }; 
    __.Y_DATA_PARSE = __.Y_DATA_PARSE || parseInt; 
    __.Y_DATA_FORMAT = __.Y_DATA_FORMAT || function (i) { 
     return i; 
    }; 
    __.X_AXIS_COLUMN = __.X_AXIS_COLUMN || "name"; 
    __.Y_AXIS_COLUMN = __.Y_AXIS_COLUMN || "talking_about_count"; 


    var margin = __.MERGIN, 
     width = __.WIDTH - margin.left - margin.right, 
     height = __.HEIGHT - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], 0.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(__.Y_DATA_FORMAT); 


    var svg = d3.select('#' + __.CONTAINER).append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .attr('class', __.CHART_NAME) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    this.render = function (data) { 
     x.domain(data.map(function (d) { 
     return __.X_DATA_PARSE(d[__.X_AXIS_COLUMN]); 
     })); 
     y.domain([0, d3.max(data, function (d) { 
     return __.Y_DATA_PARSE(d[__.Y_AXIS_COLUMN]); 
     })]); 

     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(__.Y_AXIS_LABEL); 

     svg.selectAll(".bar") 
      .data(data) 
      .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function (d) { 
      return x(d[__.X_AXIS_COLUMN]); 
      }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function (d) { 
      return y(d[__.Y_AXIS_COLUMN]); 
      }) 
      .attr("height", function (d) { 
      return height - y(d[__.Y_AXIS_COLUMN]); 
      }); 

     function type(d) { 
     d[__.Y_AXIS_COLUMN] = +d[__.Y_AXIS_COLUMN]; 
     return d; 
     } 
    }; 
    }; 

    // initialize fb API  
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '208005292601743', 
     xfbml  : true, 
     version : 'v2.9' 
    }); 
    FB.Event.subscribe('auth.login', function() { 
     window.location.reload(); 
    }); 

    FB.getLoginStatus(function (response) { 
     if (response.status === 'connected') { 

     var accessToken = response.authResponse.accessToken; 
     var user_id = response.authResponse.userID; 
     // init bar chart 
     var chart = new simplebarchart({}); 
     FB.api(
      '/me', 
      'GET', 
      {"fields":"likes.limit(10){created_time,name,talking_about_count}"}, 
      function(response) { 
       var data = [].slice.call(response.likes.data); 
       //render bar chart 
       chart.render(data); 
      } 
     ); 

     } 
    }); 
    };