Bir kuvvet D3 yönlendirilmiş grafik üzerinde çalışıyorum. Daha düşük bir donukluk diğer düğümlerin ve bağlantıların tüm ayarlayarak seçili olur düğüm bağlantıları ve alt düğümlerini vurgulamak istiyorum.

Bu örnekte, http://jsfiddle.net/xReHA/, ben mümkün fade out tüm bağlar ve düğümler sonra fade bağlı bağlantılar, ama şimdiye kadar fırsatım olmadı zarif fade bağlı düğümler o çocukların şu anda seçili düğüm olur.

Bu kod temel işlevi vardır:

function fade(opacity) {
    return function(d, i) {
        //fade all elements
        svg.selectAll("circle, line").style("opacity", opacity);

        var associated_links = svg.selectAll("line").filter(function(d) {
            return d.source.index == i || d.target.index == i;
        }).each(function(dLink, iLink) {
            //unfade links and nodes connected to the current node
            d3.select(this).style("opacity", 1);
            //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
            d3.select(dLink.source).style("opacity", 1);
            d3.select(dLink.target).style("opacity", 1);
        });
    };
}

Kaynaktan yüklenen bir öğe üzerinde opaklığı ayarlamak için çalıştığımda Uncaught TypeError: Cannot call method 'setProperty' of undefined Bir hata alıyorum.hedef. Sanıyorum bu doğru yol değil yük düğüm gibi bir d3 nesne, ama bulamıyorum başka bir şekilde yük olmadan yineleme üzerinde tüm düğümleri yeniden bulmak için olanları eşleşen bağlantı hedef ya da kaynak. Performansı makul tutmak için, tüm düğümler gerekenden daha yinelemek istemiyorum.

http://mbostock.github.com/d3/ex/chord.html kurutuyor bağlantıları örnek aldım:

Ancak, bu bağlı alt düğümleri değiştirmek için nasıl göstermiyor.

Ya bunu çözmek geliştirmek için nasıl iyi bir öneriniz öfkeyle upvoted olacak :)

Hata veri nesneleri (d.seçme olmasıdır kaynak ve d.hedef) elemanları bu veri nesneleri ile ilgili. DOM yerine

Satır vurgulama çalışma var, ama muhtemelen bu şekilde tek bir yineleme içine kodu birleştirmek istiyorum:

 link.style("opacity", function(o) {
   return o.source === d || o.target === d ? 1 : opacity;
 });

Komşu düğümler vurgulayarak, her düğüm için komşular ne zor çünkü. Bu bilgileri güncel veri yapılarını belirlemek o kadar kolay, düğümleri bir dizi ve bağlantıları bir dizi var, çünkü değil. Bir saniye DOM unut, ve iki düğüm a b komşular olup olmadığını belirlemek nasıl kendinize sorun?

function neighboring(a, b) {
  // ???
}

Bunu pahalı bir şekilde tüm bağlantıları üzerinde yineleme ve eğer a ve b birbirine bağlayan bir bağlantı olup olmadığını görmek için

function neighboring(a, b) {
  return links.some(function(d) {
    return (d.source === a && d.target === b)
        || (d.source === b && d.target === a);
  });
}

(Bu bağlantılar yönlendirilmemiş varsayar. Eğer sadece ileri-bağlı komşular vurgulamak, YA da.) ikinci yarısı için daha sonra ortadan istiyorsan

Eğer bunu sık sık yapmak varsa bu işlem daha etkili bir yol, bir harita veya sabit zaman arama a ve b komşu olup olmadığını test etmek için izin veren bir matris var. Örneğin:

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

Şimdi diyebilirsiniz:"

function neighboring(a, b) {
  return linkedByIndex[a.index   ","   b.index];
}

Ve böylece, şimdi düğümleri üzerinde yineleme ve opaklık güncelleme doğru

node.style("opacity", function(o) {
  return neighboring(d, o) ? 1 : opacity;
});

(Bir kısmı aynı zamanda, özel durum mouseovered bağlantı kendisi, ya da ayarı kendi kendine bağlantı için her düğüm linkedByIndex veya test için d doğrudan zaman hesaplama tarzı, ya da kullanarak !önemli css :hover tarzı.)

Kodunuzu değiştirmek isteyeceğim en son şey donukluk yerine, bu çok daha iyi performans sunar, çünkü dolgu ve kontur, opaklık-matlık kullanmaktır.