こんにちわ。nap5です。


d3.intersectionを使ったAND検索機能を作ってみましたので、紹介したいと思います。

d3のintersectionに関しては以下のリンクが助けになります。

デモコードです。

デモサイトです。

共通集合を抜き出してそこに含まれる件数がアクティブなタグフィルタリング件数と同じであれば、AND検索を実現できます。

現実的にはElasticsearchとかにここらへんは投げてしまったほうがいいと思います。

今回はあくまでデモです。

 const matchedItems = useMemo(() => {
    return tidy(
      values,
      filter((item) => {
        // AND predicate
        return (
          d3.intersection(item.productMaterials, filteredCategories.categories)
            .size === filteredCategories.categories.length
        );
        // OR predicate
        return item.productMaterials.some((d) => {
          return filteredCategories.categories.includes(d);
        });
      }),
      map((item) => {
        return item.items;
      })
    ).flat();
  }, [filteredCategories]);

簡単ですが、以上です。