d3.intersectionを使ったAND検索機能を作ってみよう

こんにちは。nap5です。

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

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

Set Operations

d3-array 2.8 introduces methods for set operations. These are useful for comparing collections of values. For example, say you have arrays of numbers , , and : You might be curious to know which values are in both and . This is the set intersection , and is computed by d3.intersection. The return value of d3.intersection is a Set. A Set contains only unique values (according to the SameValueZero algorit...

Observable

外部サイト

 

https://observablehq.com/@d3/set-operations

デモコードです。

デモサイトです。

https://react-nextjs-filtering-multi-categories.onrender.com

react-nextjs-filtering-multi-categories.onrender.com

外部サイト

 

https://react-nextjs-filtering-multi-categories.onrender.com

共通集合を抜き出してそこに含まれる件数がアクティブなタグフィルタリング件数と同じであれば、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]);

簡単ですが、以上です。

• WEB