D3 stulpelyje pažymėkite pasirinktą mazgą, jo nuorodas ir vaikus

Dirbu su jėgų orientuotu grafiku D3. Noriu paryškinti pelės žymeklį, jo nuorodas ir vaikų mazgus, nustatant visus kitus mazgus ir mažesnius neskaidrumo nurodymus.

Šiame pavyzdyje, http://jsfiddle.net/xReHA/ , galiu ištrinti visas nuorodas, o mazgai išnyksta susietose nuorodose, tačiau iki šiol aš negalėjau elegantiškai išnykti susietuose mazguose, kurie yra dabartinio pelės mazgo vaikai .

Tai pagrindinė kodo funkcija:

 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); }); }; } 

Uncaught TypeError: Cannot call method 'setProperty' of undefined kai bandau nustatyti iš šaltinio. Įtariu, kad tai yra neteisingas būdas įkelti šį mazgą kaip d3 objektą, bet negaliu rasti kito būdo jį įkelti be pakartojimo visų mazgų, kad surastumėte tuos, kurie atitinka nuorodos tikslą ar šaltinį. Norint išlaikyti našumą, nenoriu, kad visi mazgai būtų daugiau nei būtina.

Aš paėmiau nuorodos išblukimo pavyzdį iš http://mbostock.github.com/d3/ex/chord.html :

2019

66
05 янв. Christopher Manning nustatytas 05 sausio 2012-01-05 10:33 '12 at 10:33 2012-01-05 10:33
ответ 1 atsakymas

Klaida yra ta, kad pasirinkote duomenų objektus (d.source ir d.target), o ne DOM elementus, susijusius su šiais duomenų objektais.

Turite eilutės išryškinimą, bet tikriausiai sujungiu jūsų kodą į vieną iteraciją, pavyzdžiui:

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

Kaimyninių mazgų pasirinkimas yra sudėtingesnis, nes jums reikia žinoti kiekvieno mazgo kaimynus. Šią informaciją nėra lengva nustatyti su dabartinėmis duomenų struktūromis, nes viskas, ką turite, yra mazgų masyvo ir nuorodų masyvo forma. Pamirškite DOM antrą sekundę ir paklauskite savęs, kaip nustatysite, ar du a ir b mazgai b kaimynai?

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

Brangus būdas tai padaryti yra perjungti visas nuorodas ir pamatyti, ar yra nuoroda, jungianti a ir b:

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

(Daroma prielaida, kad nuorodos nėra orientuotos. Jei norite pasirinkti tik kaimynus su tiesioginiu ryšiu, tada ištrinkite antrąją OR elemento pusę.)

Efektyvesnis būdas tai apskaičiuoti, jei jums reikia tai padaryti dažnai, yra turėti žemėlapį arba matricą, kuri leistų ieškoti nuolatinės paieškos, siekiant patikrinti, ar a ir b yra kaimynai. Pavyzdžiui:

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

Dabar galite pasakyti:

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

Taigi dabar galite perjungti mazgus ir teisingai atnaujinti jų neskaidrumą:

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

(Taip pat galite naudoti ypatingą labiausiai susietos nuorodos atvejį, nustatydami savo nuorodą kiekvienam linkedByIndex mazgo linkedByIndex , bandydami d tiesiogiai apskaičiuojant stilių arba naudodami svarbų css :hover .)

Paskutinis dalykas, kurį norėčiau pakeisti jūsų kode, yra neskaidrumo ir neskaidrumo naudojimas, nes jie suteikia daug geresnių rezultatų.

86
08 янв. atsakymas suteiktas mbostock sausio 08 2012-01-08 21:57 '12 at 9:57 2012-01-08 21:57

Kiti klausimai dėl etikečių arba užduoti klausimą