डी 3 पेड़ खड़ी जुदाई

Question

मैं इसी प्रकार के डी 3 पेड़ लेआउट का उपयोग कर रहा हूँ,: http://mbostock.github.com/d3/talk/20111018/tree.html

मैं अपने की जरूरत के लिए यह बदलाव कर दिया है और एक मुद्दा में चल रहा हूँ। उदाहरण में भी वही समस्या है जहां आपके पास बहुत सारे नोड्स खुले हैं तो वे कॉम्पैक्ट बन जाते हैं और पढ़ने और बातचीत को मुश्किल बनाते हैं। मैं ऐसे अंतर के लिए अनुमति देने के लिए मंच को फिर से आकार देने के दौरान नोड्स के बीच न्यूनतम लंबवत स्थान को परिभाषित करना चाहता हूं।

.separation(function (a, b) { 
    return (a.parent == b.parent ? 1 : 2)/a.depth; 
}) 

काम नहीं किया है कि:

मैं जुदाई एल्गोरिथ्म संशोधित करने से यह काम करने के लिए कोशिश की। मैंने गणना की भी कोशिश की कि किस गहराई में सबसे अधिक बच्चे थे, फिर मंच की ऊंचाई children * spaceBetweenNodes होने के लिए कह रहे थे। यह मुझे करीब मिला, लेकिन अभी भी सटीक नहीं था।

depthCounts = []; 
nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 

    if(!depthCounts[d.depth]) 
     depthCounts[d.depth] = 0; 

    if(d.children) 
    { 
     depthCounts[d.depth] += d.children.length; 
    } 
}); 

tree_resize(largest_depth(depthCounts) * spaceBetweenNodes); 

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

nodes.forEach(function(d, i) { 
    d.y = d.depth * 180; 
}); 

यदि आप कोई तरीका सुझा सकते हैं या पता कर सकते हैं कि मैं नोड्स के बीच लंबवत न्यूनतम अंतर को पूरा कर सकता हूं तो कृपया पोस्ट करें। मैं बहुत आभारी रहूंगा। मैं शायद कुछ बहुत आसान याद कर रहा हूँ।

Answer 1

2016 के रूप में, मैं का उपयोग कर इस लक्ष्य को हासिल करने में सक्षम था बस

tree.nodeSize([height, width]) 

https://github.com/mbostock/d3/wiki/Tree-Layout#nodeSize

API संदर्भ थोड़ा गरीब है, लेकिन काम करता है सुंदर सीधे आगे है। tree.size([height, width]) के बाद इसका उपयोग करना सुनिश्चित करें या फिर आप अपने मूल्यों को फिर से ओवरराइड कर देंगे।

अधिक संदर्भ के लिए: D3 Tree Layout Separation Between Nodes using NodeSize

Answer 2

मैं Google समूह पर किसी उपयोगकर्ता से सहायता के साथ इसे समझने में सक्षम था। मैं पद नहीं ढूंढ पाया। समाधान के लिए आपको एक स्थान पर D3.js को संशोधित करने की आवश्यकता है, जिसकी अनुशंसा नहीं की जाती है, लेकिन यह केवल यही समस्या थी जो मुझे मिल सकती थी।

लाइन 5724 के आसपास शुरू या इस विधि: d3_layout_treeVisitAfter

परिवर्तन:

d3_layout_treeVisitAfter(root, function(node) { 
    node.x = (node.x - x0)/(x1 - x0) * size[0]; 
    node.y = node.depth/y1 * size[1]; 
    delete node._tree; 
}); 

रहे हैं:

d3_layout_treeVisitAfter(root, function(node) { 
    // make sure size is null, we will make it null when we create the tree 
    if(size === undefined || size == null) 
    { 
     node.x = (node.x - x0) * elementsize[0]; 
     node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
     node.x = (node.x - x0)/(x1 - x0) * size[0]; 
     node.y = node.depth/y1 * size[1]; 
    } 
    delete node._tree; 
}); 

नीचे नामक एक नया चर जोड़ें: elementsize और यह डिफ़ॉल्टपर लाइन 5731

var hierarchy = d3.layout.hierarchy().sort(null).value(null) 
    , separation = d3_layout_treeSeparation 
    , elementsize = [ 1, 1 ] // Right here 
    , size = [ 1, 1 ]; 

करने के लिएएक विधि tree.size = function(x) कहा जाता है नीचे न हो। कि परिभाषा नीचे निम्नलिखित जोड़ें:

tree.elementsize = function(x) { 
    if (!arguments.length) return elementsize; 
    elementsize = x; 
    return tree; 
}; 

अंत में जब आप पेड़ बनाने आप बदल सकते हैं elementsize तो जैसे

var tree = d3.layout.tree() 
      .size(null) 
      .elementsize(50, 240); 

Answer 3

मूल ठीक आप काम करेंगे प्रस्तावित, तो आप सिर्फ तुम क्या सुनिश्चित करने के लिए है यह सब कुछ कैनवास में जोड़ने के बाद। डी 3 प्रत्येक बार जब आप प्रवेश करते हैं, बाहर निकलें, संलग्न करते हैं, लेआउट को पुन: गणना करते हैं। एक बार जब आप यह सब कर लेंगे, तो आप गहराई को ठीक करने के लिए d.y के साथ fiddle कर सकते हैं।

nodes.forEach(function(d) { d.y = d.depth * fixdepth}); 

Answer 4

मुझे पता है कि मुझे अन्य उत्तरों का जवाब नहीं देना चाहिए, लेकिन मेरे पास कोई टिप्पणी जोड़ने के लिए पर्याप्त प्रतिष्ठा नहीं है।

वैसे भी, मैं बस नवीनतम d3.v3.js फ़ाइल का उपयोग कर लोगों के लिए इसे अपडेट करना चाहता था। (मुझे लगता है कि यह एक नए संस्करण की वजह से है, क्योंकि स्वीकृत उत्तर में लाइन संदर्भ मेरे लिए गलत थे।)

d3.layout.tree फ़ंक्शन जिसे आप संपादित कर रहे हैं 6236 और 6345 के बीच पाया जाता है। D3_layout_treeVisitAfter प्रारंभ होता है लाइन 6318 पर। पदानुक्रम परिवर्तनीय लाइन 6237 पर घोषित किया गया है। tree.elementsize के बारे में थोड़ा अभी भी खड़ा है - मैंने इसे 6343 पर रखा है।

आखिरकार (मुझे लगता है कि यह एक त्रुटि थी): जब आप पेड़ बनाते हैं, डालते हैं स्क्वायर ब्रैकेट के अंदर आयाम, जैसे आप आमतौर पर "आकार" के साथ करते हैं। तो:

var tree = d3.layout.tree() 
     .size(null) 
     .elementsize([50, 240]);