2015-11-24 12 views
12

मैं this solution ओवरलैप के बिना एक "संगत" आकार के भीतर क्लस्टरिंग तत्वों की देखभाल करने के लिए प्रकट होता है जो, लेकिन क्या आकार निम्नलिखित की तरह, अधिक अस्पष्ट था अगर देखा है:क्लस्टरिंग तत्वों

enter image description here

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


जे एस फिडल संदर्भ के लिए:

var tilesize = 18, tilecount = 15; 
var gRows = Math.floor($(".container").innerWidth()/tilesize); 
var gCols = Math.floor($('.container').innerHeight()/tilesize); 

var vals = _.shuffle(_.range(tilecount)); 
var xpos = _.shuffle(_.range(gRows)); 
var ypos = _.shuffle(_.range(gCols)); 

_.each(vals, function(d,i){ 
    var $newdiv = $('<div/>').addClass("tile"); 
    $newdiv.css({ 
     'position':'absolute', 
     'left':(xpos[i] * tilesize)+'px', 
     'top':(ypos[i] * tilesize)+'px' 
    }).appendTo('.container').html(d); 
}); 

संपादित

This example एक परिभाषित आकार के भीतर यादृच्छिक क्लस्टरिंग है, लेकिन है कि आकार के संदर्भ के बाद से एक वर्ग नहीं है, मैं की आवश्यकता होगी पहले एक एसवीजी ऑब्जेक्ट को कैनवास तत्व में कनवर्ट करने और फिर कुछ इसी तरह के कोड को चलाने पर कुछ परीक्षण करने के लिए।

+0

शायद दो सरणी (* प्रत्येक अक्ष * के लिए एक) के बजाय आप समन्वय जोड़ों के साथ एक कर सकते हैं जिसे आप पहले फिट करने वाले लोगों के लिए फ़िल्टर कर सकते हैं ई आकार, और उन लोगों से आप यादृच्छिक रूप से चुन सकते हैं कि आप क्या चाहते हैं। यह एक रैखिक दृष्टिकोण होगा जिसे कुछ अंदर आने तक पुनः चयन करने की आवश्यकता नहीं है। –

+0

उत्तर के लिए धन्यवाद - किसी भी मौके पर आपने जंगली में देखा है? संभावित तरीकों के लिए कुछ प्रेरणा इकट्ठा करने की कोशिश कर यह हासिल किया जा सकता है। – Zach

+0

यह वास्तव में एक अच्छा सवाल है। आकार के चारों ओर मुक्केबाजी एक विकल्प है? –

उत्तर

6

, स्ट्रिंग में किसी भी चरित्र से मेल करने के इनपुट स्ट्रिंग में मिलान चरित्र के लिए स्थानापन्न के रूप में वापसी तत्व RegExp के साथ छवि की ascii प्रतिनिधित्व, csswhite-space सेट pre को, .html(), String.prototype.replace() बनाने का प्रयास करें html

$(function() { 
 
    $("div").html(function(index, html) { 
 
    return html.replace(/g/g, function(match) { 
 
     return "<span>" + match + "</span>" 
 
    }) 
 
    }) 
 
})
div { 
 
    font: 8px/4px monospace; 
 
    text-align: center; 
 
    white-space:pre; 
 
} 
 

 
span { 
 
    background-color:dodgerblue; 
 
    color: navy; 
 
    text-shadow: 0.75em 0.75em gold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
                         
 
                       
 
                         
 
                      gggg              
 
                      ggggggggg             
 
                     gggggggggggg             
 
                     ggggggggggggggg             
 
                     ggggggggggggggggg            
 
                     ggggggggggggggggg            
 
                    ggggggggggggggggggg            
 
                    gggggggggggggggggggg            
 
                    gggggggggggggggggggggg            
 
                    ggggggggggggggggggggggg            
 
                   gggggggggggggggggggggggg            
 
                   gggggggggggggggggggggggggg            
 
                   gggggggggggggggggggggggggggg            
 
             gggggggggggggggggggggggggggggggggggggggggggggggggg            
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggg    ggg       
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggg   ggggggggg       
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggg  ggggggggggggg      
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggg  gggggggggggggggggg      
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg     
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg      
 
             ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg      
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg      
 
             ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg      
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg       
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg       
 
             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg       
 
             ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg        
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg         
 
            gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg         
 
            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
           gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
           ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
           gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
           gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
          gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
          gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
         gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg            
 
         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
         gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg           
 
         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg          
 
        ggggggggggggggggggggggggggggggggggg  gggggggggggggggggggggggggggggggggggg          
 
        ggggggggggggggggggggggggggggggggg   ggggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggggg   ggggggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggggggg    gggggggggggggggggggggggggggggggg          
 
        ggggggggggggggggggggggggggggg     gggggggggggggggggggggggggggggg          
 
        ggggggggggggggggggggggggggg     gggggggggggggggggggggggggggggg          
 
        gggggggggggggggggggggggggg     gggggggggggggggggggggggggggg          
 
         ggggggggggggggggggggggggg     gggggggggggggggggggggggggggg          
 
         gggggggggggggggggggggggg      gggggggggggggggggggggggggg           
 
         gggggggggggggggggggggg      gggggggggggggggggggggggg           
 
         gggggggggggggggggggg       ggggggggggggggggggggggg           
 
         gggggggggggggggggg       ggggggggggggggggggggg           
 
          gggggggggggggggg        ggggggggggggggggggg            
 
          ggggggggggggg        gggggggggggggggggg            
 
           ggggggggg         ggggggggggggggg            
 
                      gggggggggggg             
 
                      gggggggg             
 
                                     
 
                                     
 
                                     
 
                                                      
 
</div>

+0

jsfiddle https://jsfiddle.net/vybzz4cg/ – guest271314

+0

वाह, भयानक उत्तर और वास्तव में उदाहरण कोड की सराहना करते हैं! यह निश्चित रूप से क्षेत्र के लिए सीमा बनाता है, लेकिन (एक भाग मैं अपने मूल प्रश्न में जोड़ना चाहता हूं) यह है कि क्षेत्र को भरने के लिए हमेशा पर्याप्त तत्व नहीं हो सकते हैं। हालांकि सही रास्ते पर निश्चित रूप से। मैं इसके साथ खेलना शुरू कर रहा हूं और देख सकता हूं कि यह मुझे कहां प्राप्त करता है। धन्यवाद! – Zach

संबंधित मुद्दे