Facebook网络数据API和D3.JS

Facebook web data API and D3.JS

本文关键字：D3 JS API 网络数据 Facebook 更新时间：2023-09-26

我正在尝试构建一个简单的面板，其中有一个条形图，显示我拥有的页面的帖子，并按共享数量进行排名。我只想使用Javascript和D3.JS来构建它

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

从那里我希望能够将数据传递到我的D3.js代码中。我该怎么做？我需要使用node.js或类似的东西吗？我可以检索数据，但我只知道在javascript控制台中打印它们。

我不希望有人给我完整的代码，但提示我应该做什么会很好。

谢谢，

西蒙。

希望这能对您有所帮助。

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