2012-12-13 53 views
18

का उपयोग कर शरीर के अलावा अन्य तत्वों के लिए एसवीजी कैनवास संलग्न करें क्या <body> के अलावा किसी तत्व को एसवीजी कैनवास जोड़ना संभव है यदि स्क्रिप्ट उस तत्व के अंदर नहीं है?डी 3

उदाहरण के लिए, नीचे दिए गए कोड काम नहीं करता:

<html> 
<body> 
<script src="../../d3.v2.js"></script> 
<script> 
    var vis = d3.select("#container") 
     .append("svg:svg") 
      .attr("width",w) 
      .attr("height",h); 
</script> 

<div id="container"></div> 

</body> 

सभी उदाहरण मैं उपयोग d3.select("body").append.... देखा है लेकिन स्पष्ट रूप से हम नहीं हमेशा शरीर के लिए तुरंत कैनवास संलग्न करना चाहते हैं।

मुझे पता चला कि <script> कंटेनर div के अंदर है तो मैं d3.select("#container") का उपयोग कर सकता हूं लेकिन यह मेरे लिए अजीब लगता है कि मुझे अपनी स्क्रिप्ट को विशिष्ट कंटेनर के अंदर शामिल करना होगा जहां मैं कैनवास चाहता हूं।

उत्तर

19

आप मौजूद होने से पहले #container चुनने का प्रयास कर रहे हैं। आपको अपना कोड onload में डालना होगा या पृष्ठ में #container से नीचे की स्क्रिप्ट को स्थानांतरित करना होगा।

+0

इसके अलावा, स्क्रिप्ट में 'हेडर' में शामिल है। – bobthyasian

+1

यह एक बहस योग्य बिंदु है, क्योंकि कुछ लोग पेज लोड के अंत में सभी या अधिक स्क्रिप्ट को पेज लोड और रेंडर करने से रोकने के लिए रोकना पसंद करते हैं। – Zikes

+0

अद्भुत, त्वरित प्रतिक्रिया के लिए धन्यवाद। एक आकर्षण की तरह काम करता है - मुझे यह भी समझने में मदद करता है कि डी 3 चयनकर्ता कैसे काम करते हैं। – Gilman