jeudi 7 novembre 2019

Adding Labels to the Edges of a Graph while Filtering Nodes on Force-Directed Graphs

I build a network graph, where you can filter the nodes by clicking on a button (means it takes out some nodes based on the group and their referenced edges). I managed to label the nodes in the graph and currently I am not finding a solution to add labels to the edges as well. The problem: I cannot use the straight forward builder of the paths because it needs to update as well by the click on the button (since some edges disappear as well). So I still need to add both a path and a label to the edges.

I tried to use the same logic as for the nodes but it didn't work out. To give more detail, I defined a new variable, which will be called during the update process. However, it only creates the classes but with no attributes in it.

I tried to add the labels to the edges according to the logic of http://bl.ocks.org/jhb/5955887

//UPDATE
path = path.data(graph.links1, function (d) { return d.id; });
//  EXIT
        path.exit()
            .remove();
        //  ENTER
        newPath = path.enter()
            .append("path")
            .attr({
                'd': function (d) { return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y },
                'class': 'path',
                'fill-opacity': 0,
                'stroke-opacity': 0,
                'fill': 'blue',
                'stroke': 'red',
                'id': function (d) { return d.names }
            });
            //.style("pointer-events", "none");
            console.log(path)

        path = path.merge(newPath);

It should add a path object with the according attributes.

Aucun commentaire:

Enregistrer un commentaire