Bir düğümdeki tüm alt öğeleri nasıl kaldırırım ve sonra bunları farklı renk ve boyutta yeniden uygularım?

Bu yüzden, düğümleri, bağlantıları ve diğer öğeleri ayarlamak için bir sonraki kuvvet düzeni grafik koduna sahibim:

var setLinks = function ()
{
    link = visualRoot.selectAll("line.link")
        .data(graphData.links)
        .enter().append("svg:line")
        .attr("class", "link")
        .style("stroke-width", function (d) { return nodeStrokeColorDefault; })
        .style("stroke", function (d) { return fill(d); })
        .attr("x1", function (d) { return d.source.x; })
        .attr("y1", function (d) { return d.source.y; })
        .attr("x2", function (d) { return d.target.x; })
        .attr("y2", function (d) { return d.target.y; });

    graphData.links.forEach(function (d)
    {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });
};


var setNodes = function ()
{
    node = visualRoot.selectAll(".node")
        .data(graphData.nodes)
        .enter().append("g")
        .attr("id", function (d) { return d.id; })
        .attr("title", function (d) { return d.name; })
        .attr("class", "node")
        .on("click", function (d, i) { loadAdditionalData(d.userID, this); })
        .call(force.drag)
        .on("mouseover", fadeNode(.1)).on("mouseout", fadeNode(1));
};

//append the visual element to the node
var appendVisualElementsToNodes = function ()
{
    node.append("circle")
        .attr("id", function (d) { return "circleid_" + d.id; })
        .attr("class", "circle")
        .attr("cx", function (d) { return 0; })
        .attr("cy", function (d) { return 0; })
        .attr("r", function (d) { return getNodeSize(d); })
        .style("fill", function (d) { return getNodeColor(d); })
        .style("stroke", function (d) { return nodeStrokeColorDefault; })
        .style("stroke-width", function (d) { return nodeStrokeWidthDefault; });

    //context menu:
    d3.selectAll(".circle").on("contextmenu", function (data, index)
    {
        d3.select('#my_custom_menu')
          .style('position', 'absolute')
          .style('left', d3.event.dx + "px")
          .style('top', d3.event.dy + "px")
          .style('display', 'block');

        d3.event.preventDefault();
    });
    //d3.select("svg").node().oncontextmenu = function(){return false;};

    node.append("image")
        .attr("class", "image")
        .attr("xlink:href", function (d) { return d.profile_image_url; })//"Images/twitterimage_2.png"
        .attr("x", -12)
        .attr("y", -12)
        .attr("width", 24)
        .attr("height", 24);

    node.append("svg:title")
        .text(function (d) { return d.name + "\n" + d.description; });
};

Şimdi, renkler ve boyut bağımlılıkları değişti ve grafik çemberlerini (+ eklenen tüm öğeler) farklı renk ve yarıçapla yeniden çizmem gerekiyor. Bununla ilgili sorun yaşıyorum.

Bunu yapabilirim:

visualRoot.selectAll(".circle").remove();

ama eklediğim tüm görüntüler '.circles'hala orada duruyor.

Herhangi bir şekilde, herhangi bir yardım takdir edilecektir, açıklama yeterince açık değilse bana bildirin, düzeltmeye çalışacağım.

PS graphData.nodes ve arasındaki fark d3.selectAll('.nodes')nedir?

Cevabınız işe yarayacak, ancak gelecek nesil için bu yöntemler daha geneldir.

Tüm alt öğeleri HTML'den kaldırın:

d3.select("div.parent").html("");

Tüm alt öğeleri SVG / HTML'den kaldırın:

d3.select("g.parent").selectAll("*").remove();

.html("")Çağrı benim SVG ile çalışır, ancak kullanmanın bir yan etkisi olabilir innerSVG .

İlk tavsiyem, d3.jsseçimlerle ilgili API'yi okumanızdır : https://github.com/mbostock/d3/wiki/Selections

enter()Komutun nasıl çalıştığını anlamalısınız ( API ). Yeni düğümleri işlemek için kullanmak zorunda olmanız gerçeğinin size yardımcı olacak bir anlamı var.

İşte uğraştığınız temel süreç selection.data():

• önce seçime bazı verileri "eklemek" istersiniz. Yani sizde:

    var nodes = visualRoot.selectAll(".node")
        .data(graphData.nodes)
  

• Ardından, her veri değiştiğinde tüm düğümleri değiştirebilirsiniz (bu tam olarak istediğinizi yapacaktır). Örneğin, yüklediğiniz yeni veri kümesindeki eski düğümlerin yarıçapını değiştirirseniz

    nodes.attr("r", function(d){return d.radius})
  

• Ardından, yeni düğümleri işlemeniz gerekir, bunun için yeni düğümleri seçmeniz gerekir, bunun selection.enter()için yapılan şey budur:

    var nodesEnter = nodes.enter()
        .attr("fill", "red")
        .attr("r", function(d){return d.radius})
  

• Sonunda, artık istemediğiniz düğümleri kesinlikle kaldırmak istiyorsunuz, bunu yapmak için onları seçmelisiniz, bunun selection.exit()için yapılmış.

    var nodesRemove = nodes.exit().remove()
  

Tüm sürecin iyi bir örneği API wiki'de de bulunabilir: https://github.com/mbostock/d3/wiki/Selections#wiki-exit

bu şekilde çok kolay çözdüm,

visualRoot.selectAll(".circle").remove();
visualRoot.selectAll(".image").remove();

ve sonra, yarıçapı ve rengi hesaplama kodu özellikleri değiştirdiği için farklı şekilde oluşturulan görsel öğeleri yeniden ekledim. Teşekkür ederim.

Öğenin kendisini kaldırmak istiyorsanız element.remove(), yaptığınız gibi kullanın . Yalnızca öğenin içeriğini kaldırmak, ancak öğeyi olduğu gibi tutmak istiyorsanız, f.ex'i kullanabilirsiniz.

visualRoot.selectAll(".circle").html(null);
visualRoot.selectAll(".image").html(null);

yerine .html("")(hangi öğenin çocuklarının silinmesini istediğinizden emin değildim). Bu , öğenin kendisini tutar ancak dahil edilen tüm içeriği temizler . Bunu yapmanın resmi yolu , tarayıcılar arası çalışmalıdır.

Not: daire boyutlarını değiştirmek istediniz. Denedin mi

d3.selectAll(".circle").attr("r", newValue);

Tüm elemanı bir düğümden kaldırmak için:

var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
    for (var j = 0; j < siblings.length; j++) {
        siblings[i].parentElement.removeChild(siblings[j]);
    }
}`