Question

我正尝试通过数据属性中是否存在某些关键字来过滤地图上的数据点。例如，按音乐流派过滤点，即显示其“流派”属性包含以下任何一个关键字的所有点：“摇滚”，“流行”，“独立”。

这几乎可以正常工作，但是我无法完全使D3过滤器方法在数组上工作。这是一个示例：

//When "Rock Genre" radio button is instantiated, display only "Rock" events
d3.selectAll("#rockPopGenre").on("change", function() {
resetDisplay()
display = this.checked ? "none" : "#ffba00";
display2 = this.checked ? "none" : "black";
x = ["Rock","Pop","Indie"]
genreMatch(x)            
});


//Genre matching function which filters points based on an array of key-words
function genreMatch (genreType) {
var genreType

for (i=0; i<genreType.length; i++){
    d3.selectAll(".events")
.filter(function(d) {       
    return (!d.Genre.includes(genreType[i]))
})
.style("fill", display)
.style("stroke", display2)
}  
}

d.Genre示例：

"Genre": "Standup, Comedy Rock, Comedy, Standup Comedy, Funny, Humor"
"Genre": "Genres: Alternative Rock, Alternative, Pop"
"Genre": "Indie, Indie Electronic, Rock, Alternative"

上述方法仅部分起作用。例如，它仅显示包含关键字“ Rock”的点，但将排除包含“ Pop”的点。我想根据ALL关键字过滤数据：即d.Genre在字符串中包含“ Rock”，“ Pop”或“ Indie”，显示这些点，并隐藏不符合该条件的点。

我不太确定如何实现这一目标。我认为问题在于代码将分别过滤数组中的每个关键字，而不是将数组视为一组要匹配的单词。预先感谢。

Answer 1

您可以根据事件的过滤条件来更改事件的不透明度属性：

d3.selectAll(".events").attr('opacity', d => {   
   const includes = genreType.filter(item => d.Genre.indexOf(item) !== -1)
   return includes ? 1 : 0
})

这将在以下假设下起作用：d.Genre是这样的字符串"Standup, Comedy Rock, Comedy, Standup Comedy, Funny, Humor"，genreType是这样的关键字数组：["Standup", "Comedy"]。

genreType中的另一个字符串是您应该执行.split(/, ?/g)这样的拆分以进行转换

在D3中按数组过滤（按字符串关键字数组过滤）

1 个答案: