使用jQuery datepicker实现D3网络图节点高亮的问题求助

问题原因 #

• for循环仅匹配第一个日期：现有逻辑在for循环第一次迭代时就直接返回了匹配结果，无论第一个日期是否匹配，都不会遍历到第二个日期属性，因此只有每个节点的首个日期能触发匹配。
• forEach抛出Missing number at position 0错误：你在forEach中传入$.datepicker.parseDate的参数是date对象，而非对象下的date字符串属性，方法无法解析对象格式的参数因此报错。

修复方案 #

单日期匹配修复 #

将#from选择器的onClose回调中filter逻辑替换为以下代码即可解决你的示例场景问题，选中25.09.2021也能正常高亮对应节点：

filNodes.filter((fnodes) => {
  // 遍历当前节点所有日期，只要有一个和选中日期匹配就返回true
  return fnodes.dates.some(dateItem => dateItem.date === selectedDate)
}).classed("highlight", true)

日期范围匹配扩展（可选） #

如果后续需要实现选中起始、结束日期后，高亮所有存在日期落在该区间的节点，可参考如下逻辑封装公共方法：

function highlightMatchNodes() {
  const filNodes = node.selectAll("circle")
  filNodes.classed("highlight", false)
  // 两个日期都选中时才执行范围匹配
  if (!minDate || !maxDate) return
  filNodes.filter((fnodes) => {
    return fnodes.dates.some(dateItem => {
      const curDate = $.datepicker.parseDate("dd.mm.yy", dateItem.date)
      return curDate >= minDate && curDate <= maxDate
    })
  }).classed("highlight", true)
}

之后在#from和#to的onClose回调末尾调用该方法即可。

内容的提问来源于stack exchange，提问作者ICoded