Tree図でnode.ancestors()を使い、祖先要素までのpathをハイライト

version

d3.jsのversionは4.1.0です。

Code

今回使用した全コード

mouseイベントを追加

addHover() {
    this.element.on("mouseover", this.mouseovered(true))
    .on("mouseout", this.mouseovered(false));
}

mouse hoverさせてハイライトさせます。起点となる要素にmouseイベントを追加します。

該当コード

祖先要素をハイライト

Code

mouseovered(active) {

    return function(d) {

      var paths = d3.selectAll("path");

      if(active) {
        let ancestors = d.ancestors();
        
        //ハイライト
        paths.filter((d) => ancestors.includes(d))
        .style("stroke", "#f00");
        
      } else {
      	//ハイライトやめて、デフォルトの色に変更
        paths.style("stroke", "#555");
      }
    };
  }

node.ancestors()

祖先要素を配列で返します。

d3-hierarchy/README.md at master · d3/d3-hierarchy

includes

indexOfではなくて、ES6のincludesを使って配列の要素を検索します。filterを使って祖先要素に該当するものだけを選別します。

String.prototype.includes() - JavaScript | MDN