D3.js v5 - обновление узлов из другого массива узлов - PullRequest
Новая
       13

D3.js v5 - обновление узлов из другого массива узлов

0 голосов
/ 03 мая 2019

Каждый полученный мной узел находится в теге g html, который содержит еще 2 тега:

Текстовый тег - представляет имя узла.

Тег круга - форма узла.

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

Я пытался поиграть с методом exit (). Remove () и методом merge (), но, кажется, ничто не решает мою проблему

Вот часть моей функции обновления, которая относится к узлам. 

    var node = d3.select('.nodes')
        .selectAll('g.node');
    //here is my selection between two array of nodes
    node = node.data(show_bad_connections ? bad_nodes : nodes)

    node.exit().remove();

    node_enter = node.enter().append("g")
        .attr("class", "node").merge(node);


    node_enter.append("text")
        .attr("class", "nodetext")
        .attr("x", "0em")
        .attr("y", 15)
        .text(function (d) { return d.name });

    node_enter.append("circle")
        .style("fill", function (d) {
            if (d.id == 0) { return "#0099ff" }
            if (d.CF.includes(0)) { return "#00cc00" }
            if (d.TSP > 0.5) { return "#ff9900" } else { return "#ff0000" }
        })
        .attr("r", r);

    node_enter.on("mouseover", function (d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g.append('text')
            .classed('info', true)
            .attr('dx', "0em")
            .attr('dy', -10)
            .text(function (d) {
                if (d.id == 0) { return "id=0" }
                else { return "id=" + d.id.toString() + ",TF=" + d.TF.toString() + ",AUA=" + d.AUA.toString() }
            })
            .style("font-size", "12px");

        d3.selectAll('line.link')
            .filter(function (l) {
                return (d.id != 0 && (d.id == l.source.id || d.id == l.target.id));
            })
            .style("opacity", 1)

    }).on("mouseout", function () {
        d3.selectAll('line.link').style("opacity", 0.1)
        // Remove the info text on mouse out.
        d3.select(this).select('text.info').remove();

    });

Я ожидаю получить тег html только с кружком и текстом нового узла.

...