javascript - डी 3 बल निर्देशित ग्राफ़ में चयनित नोड, इसके लिंक और उसके बच्चों को हाइलाइट करें




1 Answers

त्रुटि यह है क्योंकि आप उन डेटा ऑब्जेक्ट्स से जुड़े DOM तत्वों के बजाय डेटा ऑब्जेक्ट्स (d.source और d.target) का चयन कर रहे हैं।

आपके पास काम करने वाली हाइलाइटिंग लाइन है, लेकिन मैं शायद आपके कोड को एक ही पुनरावृत्ति में जोड़ दूंगा, जैसे:

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

पड़ोसी नोड्स को हाइलाइट करना कठिन है क्योंकि आपको प्रत्येक नोड के लिए पड़ोसियों को जानने की आवश्यकता होती है। यह जानकारी आपके वर्तमान डेटा संरचनाओं के साथ निर्धारित करना इतना आसान नहीं है, क्योंकि आपके पास नोड्स की एक सरणी और लिंक की एक सरणी है। एक दूसरे के लिए डोम को भूल जाओ, और खुद से पूछें कि आप कैसे निर्धारित करेंगे कि दो नोड्स a और b पड़ोसी हैं या नहीं?

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

ऐसा करने का एक महंगा तरीका सभी लिंक पर फिर से शुरू करना है और देखें कि कोई लिंक है जो ए और बी को जोड़ता है:

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

(यह मानता है कि लिंक अप्रत्यक्ष हैं। अगर आप केवल आगे जुड़े पड़ोसियों को हाइलाइट करना चाहते हैं, तो OR के दूसरे भाग को खत्म करें।)

इसे कंप्यूटिंग करने का एक और अधिक प्रभावी तरीका, यदि आपको इसे अक्सर करना है, तो नक्शा या मैट्रिक्स होना चाहिए जो निरंतर समय की लुकअप को यह जांचने की अनुमति देता है कि ए और बी पड़ोसी हैं या नहीं। उदाहरण के लिए:

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

अब आप कह सकते हैं:

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

और इस प्रकार, अब आप नोड्स पर फिर से सक्रिय हो सकते हैं और अपनी अस्पष्टता को सही ढंग से अपडेट कर सकते हैं:

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

(आप विशेष रूप से linkedByIndex लिंक भी जोड़ना चाहते हैं, या तो लिंक किए गए linkedByIndex में प्रत्येक नोड के लिए स्वयं-लिंक सेट करके, या स्टाइल की गणना करते समय सीधे d लिए परीक्षण करके या एक महत्वपूर्ण सीएसएस :hover शैली का उपयोग करके।

आखिरी बात जो मैं आपके कोड में बदलूंगा वह अस्पष्टता के बजाय भरने वाली अस्पष्टता और स्ट्रोक-अस्पष्टता का उपयोग करना है, क्योंकि ये बहुत बेहतर प्रदर्शन प्रदान करते हैं।

मैं डी 3 में एक बल निर्देशित ग्राफ पर काम कर रहा हूं। मैं माउसओवर नोड, इसके लिंक और उसके बच्चे नोड्स को अन्य सभी नोड्स और निचले अस्पष्टता के लिंक सेट करके हाइलाइट करना चाहता हूं।

इस उदाहरण में, http://jsfiddle.net/xReHA/ , मैं सभी लिंक और नोड्स को फीका करने में सक्षम हूं, फिर कनेक्ट किए गए लिंक में फीका है, लेकिन, अब तक, मैं खूबसूरती से फीका नहीं कर पा रहा हूं जुड़े नोड्स जो वर्तमान में mouseover'd नोड के बच्चे हैं।

यह कोड से मुख्य कार्य है:

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 मिल रहा है Uncaught TypeError: Cannot call method 'setProperty' of undefined जब मैं Source.target से लोड किए गए तत्व पर अस्पष्टता सेट करने का प्रयास करता हूं तो Uncaught TypeError: Cannot call method 'setProperty' of undefined त्रुटि Uncaught TypeError: Cannot call method 'setProperty' of undefined । मुझे संदेह है कि यह नोड को डी 3 ऑब्जेक्ट के रूप में लोड करने का सही तरीका नहीं है, लेकिन लिंक के लक्ष्य या स्रोत से मेल खाने वाले लोगों को खोजने के लिए मुझे फिर से नोड्स पर फिर से घुमाने के बिना इसे लोड करने का कोई और तरीका नहीं मिल रहा है। प्रदर्शन को उचित रखने के लिए, मैं आवश्यकतानुसार सभी नोड्स पर फिर से शुरू नहीं करना चाहता हूं।

मैंने http://mbostock.github.com/d3/ex/chord.html से लिंक को लुप्त करने का उदाहरण लिया:

हालांकि, यह दिखाया नहीं गया है कि जुड़े बच्चे नोड्स को कैसे बदला जाए।

इसे हल करने या सुधारने के बारे में कोई भी अच्छा सुझाव उग्र रूप से उखाड़ फेंक दिया जाएगा :)




Related