Правильный способ преобразования D3 в AngularJs

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

Вы можете использовать другие директивы и услуги люди сделали, чтобы сделать 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 
    } 
    }; 
});