Question

我创建了一个带有D3网络图的角度应用程序，该图表显示了每个节点的数据属性（如果单击）。我希望视图能够更新，因为每次单击都会更改在html文件上插入的$ scope对象的属性。以下是我的代码。问题是，当逻辑被包装在$ scope.getArtist函数中时，即使我在click事件中调用$ scope.apply，也不会更新视图＃node; node.on（....）＆＃34 ;.我知道$ scope正在更新，因为当我调试它时，它会显示正确的属性，但视图永远不会更新。当我将逻辑放在＆＃34; $ scope.getArtist函数之外时，只需在页面加载后立即运行所有内容，它就可以工作。任何人都知道可能会发生什么？

app.controller('HomeCtrl', ['$scope', '$http', "$sce", function($scope,  $http, $sce) {
$scope.query = {};

$scope.getArtist = function() {
    var artistQ = $scope.query.artist.split(" ").join("-");
    console.log(artistQ);
    $http.post('/home', {artist: "artistQ"}).then(function(allNodes){

            var link = svg.selectAll(".link")
                .data(links)
                .enter().append("line")
                .attr("class", "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; })
                .attr("stroke", "grey")
                .style("stroke-width", function(d) { return 2; });

            var node = svg.selectAll(".node")
                .data(nodes)
                .enter().append("circle")
                .attr("class", "node")
                .attr("id", function(d){return d.level})
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; })
                .attr("r", function(d){
                    if(d.samplesCollection){return 5;} 
                    else {return 3.5;}
                })
                .on("mouseenter", function(d){
                    d3.selectAll("#" + d.level)
                        .attr("stroke", "red")

                    d3.selectAll("#" + "text" + d.level)
                        .style("visibility", "visible")
                })
                .on("mouseleave", function(d){
                    d3.selectAll("#" + d.level)
                        .attr("stroke", "null")

                    d3.selectAll("#" + "text" + d.level)
                        .style("visibility", "hidden")
                })
                .style("fill", function(d) { return "gold"; })
                .call(force.drag);

            ***node.on("click", function(d) {
                var youtubeURL = d.songLink;
                console.log(youtubeURL);
                $scope.$apply(function(){
                    console.log("im applying!")
                    $scope.imgLink = d.imgLink;
                    $scope.songName = d.songName;
                    $scope.artistName = d.artistName;
                    $scope.album = d.album;
                    $scope.year = d.year;
                    $scope.sampleElement = d.sampleElement;
                    $scope.songLink = $sce.trustAsResourceUrl(youtubeURL);
                    $scope.recLabel = d.recLabel;
                    $scope.genre = d.genre;
                    console.log("aNode", $scope);
                })
            })***


    }, function(error){
        if(error) return error
    })
}



}]);

P.S。为简洁起见，省略了一些代码，并且没有与视图不更新有任何关系。

使用Angular显示d3.js网络图数据

0 个答案: