D3：从下拉列表中选择后突出显示圆圈答案

【问题标题】：D3: highlight circle after selecting from dropdownD3：从下拉列表中选择后突出显示圆圈
【发布时间】：2018-07-06 00:13:54
【问题描述】：

我有一个从 csv 填充的数据列表下拉列表。当我从下拉列表中选择项目时，我希望相关的圆圈突出显示。

<input type="text" list="initname-datalist" placeholder="Search Project/Initiative.." onChange="initiativeSearch(this.value);">

function initiativeSearch(initSelection) {
        console.log(initSelection);
            circles.transition()
                .delay(0)
                .duration(500)
                .style("fill", function(d) { 
                    return d.data.initiative_name === initSelection ? "green";})}

initiative_name 是 csv 中填充下拉列表的列。

console.log(initSelection) 确认正在传递来自 Initiative_name 的正确值，但未选择相关圈子。

【问题讨论】：

您的语法不正确。您正在使用 ternary operator 但缺少第三个操作数。它应该类似于return d.data.initiative_name === initSelection ? "green" : "red";。
感谢 altocumulus，添加第三个操作数带来了不同。虽然似乎只能在 Chrome 中使用，但我还需要 IE 和 Edge，而且我有类似的功能，所以我有点恼火，为什么这个不行。
我将 onChange 更改为 onInput 并解决了 IE 和 Edge 的问题

标签： d3.js datalist

【解决方案1】：

没有 jsfiddle 很难不猜，但我还是会冒险：

circles 实际上是initiativeSearch() 上下文中的空选择。

试试

function initiativeSearch(initSelection) {
  const circles = d3.selectAll('.circle')
    .transition() // ...and so on
}

如果您的选择为空，则在函数末尾检查d 将永远不会发生。

【讨论】：