d3JSの力指向グラフで強調表示されているすべてのノードの色を変更するにはどうすればよいですか？

debugcn 投稿 Dev

ヴィヴェーク

既存の機能：

任意のノードにマウスを合わせると、接続されているすべてのノードが強調表示されます。

期待される出力：

マウスをいずれかのノードに合わせると、接続されているすべてのノードが強調表示されますが、強調表示されたノードは同じ色で、マウスを離すと前の状態に戻る必要があります。

この機能を実装しようとしていますが、期待どおりに機能しません。

ここで動作するコードスニペットを参照してください：jsfiddle

function selectNode(selectedNode) {
  var neighbors = getNeighbors(selectedNode)

  nodeElements.transition().duration(500)
  .attr('r', function(node) {
        return getNodeRadius(node,neighbors);
   })

    .attr('fill', function(node) {
        return getNodeColor(node,neighbors);
   })


   textElements.transition().duration(500).style('font-size', function(node) {
    return getTextColor(node, neighbors)
  })


  linkElements.transition().duration(500).style('stroke', function(link) {
    return getLinkColor(selectedNode, link)
  })
}

function getNodeColor(node, neighbors) {
  // If is neighbor
  if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
    return 'rgba(123, 239, 178, 1)'
       .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
    // return node.level === 1 ? '#9C4A9C' : 'rgba(251, 130, 30, 1)'
  }  else {
      return color(node.id);
  }
  //return node.level === 0 ? '#91007B' : '#D8ABD8'
}



 var nodeElements =  g.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 60)

  .attr("stroke", "#fff")
  .attr('stroke-width', 21)
  .attr("id", function(d) { return d.id })
   //.attr("fill", function(d) {return color(d.id)}) 
     .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
     .on('contextmenu', function(d){ 
        d3.event.preventDefault();
        menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
    })
      .on('mouseover', selectNode)
      .on('mouseout', releaseNode)
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

プラザンナ

コードを変更する必要がある場所は5つあります。

1つselectNode目と2つ目はコメントを探す

function selectNode(selectedNode) {
    var neighbors = getNeighbors(selectedNode)

    nodeElements.transition().duration(500)
    .attr('r', function(node) {
        return getNodeRadius(node,neighbors);
    });
    // do not use transition here, it kinda ruins the flavour  
    // or see if you like it with transitions, your call  
    nodeElements.attr('fill', function(node) {
        // send selectedNode to your getNodeColor
        return getNodeColor(node,neighbors,selectedNode);
    })
}

ご想像のとおり、3番目と4番目のものは getNodeColor

function getNodeColor(node, neighbors, selectedNode) {
    if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
        return 'url(#grad' + selectedNode.index + ')'
    }  else {
        // use gradient here
        return 'url(#grad' + node.index + ')'
    }
}

最後のものはあなたになります releaseNode

function releaseNode() {
    nodeElements.transition().duration(500)
        .attr('r', 60);

    // don't use transitions here
    // or see if you like it with transitions, your call  
    nodeElements.attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })

    linkElements.transition().duration(500).style('stroke', 'grey');
}

これがあなたが実験するための実用的なフィドルです

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]