![見出し画像](https://assets.st-note.com/production/uploads/images/90805826/rectangle_large_type_2_3a47345b59fd89d05fc7568a8e92e593.png?width=1200)
d3.intersectionを使ったAND検索機能を作ってみよう
こんにちわ。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]);
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?