如何将鼠标悬停属性添加到d3中节点上绘制的饼图？-Howtoaddmousehoverpropertiestopiedrawnonanodeind3?

I'm working with a visualization where some of the nodes in the network have pie charts on them with varying radius and varying number of slices based on some parameters. This is what the visualization looks like in the default state:

我正在使用可视化,其中网络中的一些节点上具有饼图,具有不同的半径和基于某些参数的不同数量的切片。这是可视化在默认状态下的样子:

When I hover on a chosen node, only its connections are prominent and the rest fades away (decreases in opacity). While this works perfectly with nodes, I'm unable to apply the same settings to my pie-chart arcs. How do I fade away the lines within the pie-charts of the other nodes as well while keeping those on the currently active node untouched?

当我悬停在一个选定的节点上时,只有它的连接是显着的,其余的连接消失(不透明度降低)。虽然这与节点完美配合,但我无法将相同的设置应用于我的饼图弧。如何消除其他节点的饼图中的线条,同时保持当前活动节点上的线条不受影响?

This image shows the hover effect and the problem with the pie-charts:

此图显示了悬停效果和饼图的问题:

As you can see, the lines within the pie do not fade away while the nodes does. Here's the code snippet I'm currently working with.

如您所见,饼图中的线条在节点处不会消失。这是我目前正在使用的代码片段。

Creating the nodes and the pie slices within them (based on some internal selection criteria):

在其中创建节点和饼图切片(基于一些内部选择标准):

var outer = d3.select("#forcedLayoutGraph")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .attr("pointer-events", "all");

    var vis = outer
        .append('svg:g')
        .call(zoom);

    vis.append('svg:rect')
        .attr('width', w)
        .attr('height', h)
        .attr('fill', 'white');

    var n = nodes.length;

    var link = vis.selectAll("line.link")
        .data(links).enter()
        .append("svg:line")
        .attr("class", "link").style("stroke-width", function(d) { return Math.sqrt(d.value); });

    var colorCategory = {"1": "black", "2": "blue", "3": "red"};            // 1=root 2=blog 3=org
    var shapeCategory = {"1": "diamond", "2": "cross", "3": "circle"};      // 1=root 2=blog 3=org
    var colorDirectChild = {"1": "black", "2": "#8E44AD", "3": "#F1C40F"};      // 1=root 2=direct child of root 3=not direct child

    var node = vis.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .call(force.drag);

    node.append("text")
        .text("");

    node.append("circle")
        .attr("r",  10)
        .style("fill", function(d) { return colorDirectChild[d.isDirectChild]; });

var r = 6;
        var x = 2;
            //fill=d3.scale.category(20);

        var dOnut= d3.layout.pie();
        var arc = d3.svg.arc().innerRadius(0).outerRadius(function(d) {
                        if(this.parentNode.parentNode.__data__.category == 3)
                            if(this.parentNode.parentNode.__data__.parentcount <10)
                                value = 10; //divide by a factor x, also remove (+r)
                            else
                                value = (this.parentNode.parentNode.__data__.parentcount)/x + r;
                        else
                            value = 0;
                        return value;
                  });

        var arcs = node.selectAll("g.arc")
                       .data(function(d, i) {
                            var c=0; var groups = [];
                            for(c=0; c

node.on("mouseover", function(d){
       node.classed("node-active", function(o) {
            thisOpacity = isConnected(d, o) ? true : false;
            this.setAttribute('fill-opacity', thisOpacity);
            return thisOpacity;
        });

        node.classed("node-inactive", function(o) {
            thisOpacity = isConnected(d, o) ? false : true;
            this.setAttribute('fill-opacity', thisOpacity);
            return thisOpacity;
        });

        link.classed("link-active", function(o) {
            return o.source === d || o.target === d ? true : false;
        });



        var nodeText, nodeParentCnt; 
        d3.select(this).classed("node-inactive", false);
        d3.select(this).classed("node-active", true);

        d3.select("g.arc").attr("stroke-width","0.25px");
        d3.select(this).select("g.arc").attr("stroke-wdith","1.25px");

        d3.select(this).select("circle").transition()
            .duration(500)
            .attr("r", 20);
        d3.select(this).select("text")
            .attr("dx", 12)
            .attr("dy", ".35em")
            .text(function(d) { nodeText = d.label; nodeParentCnt = d.parentcount; return d.label; });
        d3.select("#nodeLabel").text(nodeText)
        d3.select(this).select("circle")
            .on("click", function(d){
                var win = window.open(d.label, '_blank');
                win.focus();
            });
        //console.log(nodeText);
        document.getElementById('nodeLabel').innerHTML = "URL: "+nodeText + "
" + "No. of Linking URLs: " + nodeParentCnt;
    })

    .on("mouseout", function(d){
        node.classed("node-active", false);
        link.classed("link-active", false); 
        node.classed("node-inactive", false);   

        d3.select(this).select("circle").transition()
            .duration(500)
            .attr("r", 10);
        d3.select(this).select("text")
            .text("");
        document.getElementById('nodeLabel').innerHTML = "Hover on a node!";
    });

.node {
  stroke: #fff;
  stroke-width: 0.2px;
  fill-opacity: 1;
}

.node-active{
  stroke: #555;
  stroke-width: 1.5px;
  fill-opacity: 1;
}

.node-inactive{
  fill-opacity: 0.2;
}

.link {
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-opacity: 0.2;
}

.link-active {
  stroke: #555;
  stroke-width: 2px;
  stroke-opacity: 1;
}