javascript - Facebook 网络数据 API 和 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 控制台中打印它们。

我不希望有人给我完整的代码，但如果能提示我应该做什么就太好了。

谢谢

西蒙。

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);
            }
        );

      }
    });
  };