D3: выделите круг после выбора из выпадающего списка

Question

У меня есть выпадающий список данных, который заполняется из 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";})}

инициативное_имя - это столбец в CSV, который заполняет раскрывающийся список.

console.log (initSelection) подтверждает, что передается правильное значение из init_name, но соответствующий круг не выбран.

Answer 1

Без jsfiddle трудно не угадать, но я все равно рискну:

circles фактически является пустым выделением в контексте initiativeSearch().

Попробуйте с

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

Если ваш выбор пуст, проверка на d в конце функции никогда не произойдет.