角D3jsのリンクが表示されない

Question

角度の値をd3に渡すことができるように、d3jsの角度の指令を作成したかったのです。しかし、ディレクティブを作成した後は、描画されたリンクを見ることができません。私はthisをシミュレートする次のプランナーを持っています。

書き出し角度指示コードで何が問題になっていますか？

angular 
.module('d3_directive') 
.controller('testModeller', function ($scope, $http) { 
    $scope.title = 'Modeller'; 

    $http.get('data.json').success(function (data) { 
     $scope.data = data; 
    }); 
}) 
.directive('modeller', function() { 

    //explicitly creating a directive definition variable 
    //this may look verbose but is good for clarification purposes 
    //in real life you'd want to simply return the object {...} 
    var directiveDefinitionObject = { 
     //We restrict its use to an element 
     restrict: 'E', 
     //this is important, 
     replace: false, 
     scope: { 
      graph: "=" 
     }, 
     link: function (scope, element, attrs) { 
      var svg = d3.select(element[0]).append("svg"), 
         width = 900, 
         height = 600; 
      svg.attr("height", 600).attr("width", 900); 
      var color = d3.scaleOrdinal(d3.schemeCategory20); 

      var simulation = d3.forceSimulation() 
       .force("link", d3.forceLink().id(function (d) { return d.id; }).distance(50)) //.distance(30) 
       .force("charge", d3.forceManyBody()) 
       .force("center", d3.forceCenter(width/2, height/2)); 

      scope.$watch('graph', function (newVal, oldVal) { 
       var link = svg.append("g") 
        .attr("class", "links") 
        .selectAll("line") 
        .data(newVal.links) 
        .enter().append("line") 
        .attr("stroke-width", function (d) { return Math.sqrt(2); }); 

       var group = svg.append("g") 
        .attr("class", "nodes") 
       .selectAll("g") 
       .data(newVal.nodes) 
       .enter().append("g"); 

       var node = group.append("circle") 
        .attr("r", 20) 
        .attr("fill", function (d) { return color(d.group); }) 
        .on("click", function (d) { self.CI = d.id; console.log(d.id); }) 
        .on("dblclick", dblclick) 
        .call(d3.drag() 
         .on("start", dragstarted) 
         .on("drag", dragged) 
         .on("end", dragended)); 

       var text = group.append("text") 
           .attr("class", "svgText") 
           .text(function (d) { 
            if (d.id.length > 6) 
             return d.id.substring(0, 4) + ".."; 
            else 
             return d.id; 
           }) 
           .attr("font-size", "0.6em"); 


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

       simulation 
        .nodes(newVal.nodes) 
        .on("tick", ticked); 

       simulation.force("link") 
        .links(newVal.links); 

       function ticked() { 
        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; }); 

        text 
         .attr("x", function (d) { return d.x - 8; }) 
         .attr("y", function (d) { return d.y + 5; }); 
       } 
      }); 


      function dragstarted(d) { 
       if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
       d.fx = d.x; 
       d.fy = d.y; 
      } 

      function dragged(d) { 
       d.fx = d3.event.x; 
       d.fy = d3.event.y; 
      } 

      function dragended(d) { 
       if (!d3.event.active) simulation.alphaTarget(0); 
       //d.fx = null; 
       //d.fy = null; 
      } 

      function dblclick(d) { 
       d.fx = null; 
       d.fy = null; 
       if (!d3.event.active) simulation.alphaTarget(0.3); 
      } 
     } 
    }; 
    return directiveDefinitionObject; 
}); 

Answer 1

ストロークプロパティを追加すると、それらが表示されます。今は無色です。

.links{ 
    stroke:black; 
} 

更新plunker：http://plnkr.co/edit/pZqreMIvFx3OOQ2CTaFW?p=preview