Question

我想创建一个d3js一个角度指令，这样我就可以将角度值传递给d3。但是，在创建指令后，我无法看到绘制的链接。我有以下的plunker来模拟this。

writern angular directive代码有什么问题？

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

Angular D3js链接没有显示

1 个答案: