Как предотвратить мышеловку после щелчка в D3?

Я работаю над созданием силового ориентированного графа в D3. Прямо сейчас, когда я перемещаю курсор мыши по узлам, он изменяет непрозрачность связанных ссылок с 0 на 1, а затем, когда я делаю мышку, он возвращает непрозрачность обратно к 0.

Это работает нормально, но у меня возникают проблемы с тем, чтобы сделать клик по узлу, чтобы сохранить непрозрачность ссылок равной 1, даже после события mouseout. Затем я хочу иметь возможность нажимать на другие узлы, чтобы сделать их ссылки непрозрачными 1. Затем также можно нажать на некоторые из ранее выбранных узлов, чтобы иметь возможность вернуть непрозрачность связанных ссылок на 0.

Короче говоря, я хочу иметь возможность переключать непрозрачность связанных ссылок узла без влияния событий mouseout. Пример моего текущего кода приведен ниже. Я думаю, что мне может потребоваться установить новый идентификатор для включения и выключения, когда я нажимаю на узел?

var nodeClick = function(d) {
    svg.selectAll(".link")
    .filter(function(p) { 
          return _(d.facets).contains(p.target.name)
    })
    .transition()
    .style('stroke-opacity', 0.9);
};

var overText1 = function(d) {
    svg.selectAll(".link")
    .filter(function(p) { 
          return _(d.facets).contains(p.target.name)
    })
    .transition()
    .style('stroke-opacity', 0.9);
};

var overText0 = function(d) {
        svg.selectAll(".link")
        .transition()
        .duration(500)
        .style('stroke-opacity', 0);
    };

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", function (d) {
        return d.group === 1 ? "nodeBig" : "node";
    })
    .attr("r", function(d) {return d.radius })
    .style("fill", function (d) {
        return color(d.group);
    })
    .on("mouseover", overText1)
    .on('click', nodeClick)
    .on('mouseout', overText0)
    .call(force.drag);

1 ответ

Я на самом деле, наконец, понял это самостоятельно. Я создал поле блокировки, которое принимает либо "true", либо "false". Затем я поместил оператор if в функцию mouseoff, которая включает функциональность mouseoff только для элементов, которые не имеют "true" в своем поле блокировки.

Другие вопросы по тегам