将D3转换为AngularJs的正确方法

Right way to transform D3 into AngularJs

本文关键字：方法 AngularJs D3 转换      更新时间：2023-09-26

因此，我一直在对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;
        });
    });
  });
}

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

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
    }
  };
});
相关文章：