Javascript 将D3转换为AngularJs的正确方法

因此，我已经对D3做了很多实验，但从未尝试将其转换为AngularJS指令，我甚至不确定如何正确地改变它。我有一个例子，我相信我变成了一个角度D3图表，但我相信有更有效的方式加载数据，可能在$scope中。数据。。。请使用我的JSFIDLE进行参考或更正

---

您可以使用人们为使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
    }
  };
});

---

你对使用ng3d开放吗？它是一个位于d3之上的包装器，它公开了一些API以使其不那么冗长？让我感觉到与angular指令的集成是很好的。所以我正在构建一个力方向图，另一个主要原因是我可以进行单元测试。你介意把它放在一个JSFIDE中，用一些数据来显示你的意思吗。@user2402107-这是我通过谷歌搜索找到的一个例子：这是angularjs的一个很好的例子，而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
    }
  };
});