Question

所以我一直在做很多D3的实验，但从未试图将它变成AngularJS指令，我甚至不确定改变它的正确方法。我有一个例子，我相信我变成了Angular D3图表但是我相信有更有效的方法来加载数据，可能在$ scope.data中...请使用我的jsfiddle来引用或更正。

https://jsfiddle.net/bcnmLrns/1/

var app = angular.module("chartApp", []); {

  var data = {
    "nodes": [{
      "name": "hblodget",
      "group": 1,
      "size": 1,
      "image": null
    }, {
      "name": "DowntownDonna69",
      "group": 1,
      "size": 20,
      "image": "http://pbs.twimg.com/profile_images/636139174672732160/L5cd008s_normal.jpg"
    }, {
      "name": "PupsherLive",
      "group": 1,
      "size": 19,
      "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
    }],
    "links": [{
      "source": 1,
      "target": 0,
      "value": 1
    }, {
      "source": 2,
      "target": 0,
      "value": 1
    }]
  };


  var width = 960,
    height = 500;

  var color = d3.scale.category20();

  var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  d3.json(data, function(error, graph) {
    if (error) throw error;

    force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

    var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) {
        return Math.sqrt(d.value);
      });

    var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) {
        return color(d.group);
      })
      .call(force.drag);

    node.append("title")
      .text(function(d) {
        return d.name;
      });

    force.on("tick", function() {
      link.attr("x1", function(d) {
          return d.source.x;
        })
        .attr("y1", function(d) {
          return d.source.y;
        })
        .attr("x2", function(d) {
          return d.target.x;
        })
        .attr("y2", function(d) {
          return d.target.y;
        });

      node.attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });
    });
  });
}

Answer 1

你可以使用其他指令和服务使人们更容易在Angular中使用D3（参见问题评论），但我仍然喜欢在一个简单的指令中轻松设置模块化图形：

myApp.directive('graph', function() {
  var graphLink = function(scope, element) {
    var width = 960,
    height = 500;

   var color = d3.scale.category20();

   var force = d3.layout.force()
     .charge(-120)
     .linkDistance(30)
     .size([width, height]);

     var svg = d3.select(element[0]).append("svg") // attach d3 to directive element
       .attr("width", width)
       .attr("height", height);

     d3.json(data, function(error, graph) {
       if (error) throw error;

       force
         .nodes(graph.nodes)
         .links(graph.links)
         .start();

       var link = svg.selectAll(".link") // there might be a more angular way to do this...
         .data(graph.links)
         .enter().append("line")
         .attr("class", "link")
         .style("stroke-width", function(d) {
           return Math.sqrt(d.value);
         });

       var node = svg.selectAll(".node")
         .data(graph.nodes)
         .enter().append("circle")
         .attr("class", "node")
         .attr("r", 5)
         .style("fill", function(d) {
           return color(d.group);
         })
         .call(force.drag);

      node.append("title")
        .text(function(d) {
          return d.name;
        });

      force.on("tick", function() {
        link.attr("x1", function(d) {
          return d.source.x;
        })
          .attr("y1", function(d) {
            return d.source.y;
          })
          .attr("x2", function(d) {
            return d.target.x;
          })
          .attr("y2", function(d) {
            return d.target.y;
          });

        node.attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });
      });
    };

  return {
    link: graphLink, // pass in your link function here
    scope: {
      data: '=' // pass in your data as an attribute
                // this makes this reusable, and you can redraw if the data changes
    }
  };
});

将D3转换为AngularJs的正确方法

1 个答案: