D3.js (श्रेणीबद्ध बढ़त bundling तत्वों) एक रेडियल पेड़ में तत्वों के बीच लिंक जोड़ने

Question

कुछ महीने पहले, मैंने combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree using d3.js

मैं HEB से शुरू करने की कोशिश की है और यह एक में करने की कोशिश की पेड़। चीजें जिस तरह से मैं चाहता था, काम नहीं किया है, और मुझे एहसास हुआ कि एक अलग कोण के साथ एक ढीला रेडियल पेड़ (रीनिंगोल्ड टिलफोर्ड नहीं) से शुरू करना बेहतर हो सकता है।

Here is a JSFiddle of the radial tree

डाटा मॉडल भी बदल गया है तत्वों ने अब एक नाम है के रूप में, बच्चों और आयात (लिंक)।

var flare = 
{ 
    "name": "root", 
    "children": [ 
     { 
      "name": "test1.parent1","children": [ 
       {"name": "test1.child11","children": [ 
        {"name": "test1.child111"}, 
        {"name": "test1.child112"} 
       ]} 
      ],"imports": ["test2.parent2","test3.parent3","test4.parent4"] 
     }, 
     { 
      "name": "test2.parent2","children": [ 
       {"name": "test2.child21"}, 
       {"name": "test2.child22"}, 
       {"name": "test2.child28","children":[ 
        {"name": "test2.child281"}, 
        {"name": "test2.child282"} 
       ]} 
      ],"imports": ["test3.parent3"] 
     }, 
     {"name": "test3.parent3","imports": ["test4.parent4"]}, 
     { 
      "name": "test4.parent4","children": [ 
       {"name": "test4.child41"}, 
       {"name": "test4.child42"} 
      ] 
     } 
    ] 
}; 

धीरे-धीरे शुरू करने के लिए, मैं वर्तमान JSFiddle साथ माइक Bostock से non-interactive Hierarchical edge bundling गठबंधन करने के लिए चाहते हैं, लेकिन याद रखें कि इस बातचीत बाद में यह का हिस्सा होगा।

इसके अलावा, केवल प्रथम स्तर नीचे दिखाया गया है (नतीजा यह है कि मैं चाहता हूँ) के रूप में लिंक (माता पिता माता पिता लिंक) होना आवश्यक है:

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

ध्यान दें कि पेड़ के केंद्र में एक सर्कल है जो रूट को 1 लिंक तक कवर करने के लिए है, इसलिए पेड़ स्तर 1 (माता-पिता) से शुरू होता है।

var circle = svg.append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", diameter - 725.3) 
    .style("fill", "#F3F5F6") 
    .style("stroke-width", 0.2) 
    .style("stroke", "black"); 

आदर्श रूप में, माता-पिता के बीच संबंधों को अद्यतन करने के लिए जब एक स्तर (अन) है ध्वस्त हो गई, है यह नोड्स और स्तरों के बीच लिंक के लिए करता है, लेकिन है कि बाद में आ सकते हैं और है कि शुरू में के बाद मुश्किल नहीं हो सकता है की तरह दिखाने के लिए पहला स्तर लिंक प्राप्त करना। साथ ही, यदि आवश्यक हो तो डेटा टेम्पलेट बदल सकता है, लेकिन जानकारी के सभी 3 टुकड़े महत्वपूर्ण हैं (नाम, बच्चे और आयात)।

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

Answer 1

मैंने माइक Bostock द्वारा मूल पदानुक्रमित किनारे बंडल में मिले कोड के कुछ हिस्सों का उपयोग करके इस JSFiddle में तत्वों के बीच संबंध जोड़ने में कामयाब रहे हैं और उन्हें ढहने वाले पेड़ के रेडियल संस्करण में जोड़ा है। हालांकि, बच्चों को गिरने या विस्तार करने पर वे अपडेट नहीं होते हैं!

var bundle = d3.layout.bundle(); 

var line = d3.svg.line.radial() 
    .interpolate("bundle") 
    .tension(.85) 
    .radius(function(d) { return d.y; }) 
    .angle(function(d) { return d.x/180 * Math.PI; }); 

तो update(source) में

:

var middleLinks = packageImports(root); 

svg.selectAll("path.middleLink") 
      .data(bundle(middleLinks)) 
     .enter().append("path") 
      .attr("class", "middleLink") 
      .attr("d", line); 

"packageImport" समारोह नीचे पाया जा सकता है।

function packageImports(json) { 
     var map = {}, 
      imports = []; 

     console.log(json.children); 

     // Compute a map from name to node. 
     json.children.forEach(function(d) { 
     console.log(d.name) 
     map[d.name] = d; 
     }); 

     // For each import, construct a link from the source to target node. 
     json.children.forEach(function(d) { 
     if (d.imports) d.imports.forEach(function(i) { 
      imports.push({source: map[d.name], target: map[i]}); 
     }); 
     }); 

     console.log(imports); 
     return imports; 
    } 

Answer 2

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

यह देखते हुए कि आपके पास रूट है, क्यों इसे केंद्र "नोड" के रूप में सेट न करें और इसे this जैसे रेडियल पेड़ बनाएं? Here एक और उदाहरण है, लेकिन कई जड़ों के साथ।

उसने कहा, आपने एक रेडियल पेड़ के लिए नहीं पूछा था, भले ही ऐसा लगता है कि यह आपके प्रश्न का उत्तर देगा। यदि आप अलग-अलग रेडियम की मंडलियों में चीजों को व्यवस्थित रखने के लिए दृढ़ हैं, तो शायद हल करने की समस्या यह है कि "गन्दा" दिखने वाली रेखाओं के क्रॉस-क्रॉसिंग का। यदि ऐसा है, तो एक अलग सॉर्टिंग एल्गोरिदम चाल कर सकता है। Here एक ऐसा लेख है जो D3.js. के साथ एक समान परिदृश्य में विभिन्न सॉर्टिंग एल्गोरिदम का उपयोग करने पर विस्तार करता है। डी 3 लेआउट एल्गोरिदम भी open source online हैं।

सबसे अच्छा संसाधन मैं तुम्हारे लिए ढूँढने में सक्षम था this Stack Mathematics Answer था। कुछ अंक विशेष रूप से यह मेरे लिए बाहर खड़े:

1. आप कनेक्शन/शाखाओं की कुल गड़बड़ हो सकता है, लेकिन यह इंटरैक्टिव है और शाखाओं और एक विशिष्ट नोड प्रकाश से जब आप उस नोड पर कर्सर अगर, तो यह अभी भी एक पठनीय/उपयोग करने योग्य ग्राफ हो सकता है।
2. आप अलग-अलग सॉर्टिंग एल्गोरिदम का प्रयास कर सकते हैं जब तक कि आप अपने डेटा के साथ अच्छी तरह से काम न करें।
3. आप चक्र के अंदर एक या अधिक नोड्स हो सकता है, और इस मामले बीच में रूट नोड डालने में भावना का एक बहुत हो सकता है।

यह एक व्यावहारिक रूप से प्रयोग करने योग्य जवाब नहीं है, क्योंकि यह मेथेमेटिका में है, लेकिन मुझे लगता है कि अंतर्निहित सिद्धांतों और तकनीकों की अपनी व्याख्या उपयोगी है।

यदि आप केंद्र में पेड़ की जड़ डालना नहीं चाहते हैं, तो शायद एक और अधिक कलात्मक दृष्टिकोण, माता-पिता से सभी शाखाएं मूल माता-पिता से अर्द्ध पारदर्शी, और संभवतः एक अलग रंग होनी चाहिए।

आशा इस मदद करता है!