डी 3

का उपयोग कर एचटीएमएल में एक एसवीजी संशोधित करना यह मेरी पहली पोस्ट है इसलिए मैं यह सुनिश्चित करने की कोशिश करूंगा कि मैं उचित पोस्टिंग शिष्टाचार का पालन कर रहा हूं।डी 3

मुझे HTML, d3, या जावास्क्रिप्ट के साथ कोई भी अनुभव नहीं है। हालांकि मैं xml और svg के लिए कुछ जोखिम है। मैं इस ट्यूटोरियल के माध्यम से काम करने की कोशिश कर रहा हूं: [http://bost.ocks.org/mike/circles/]। मैंने कल कई घंटे बिताए बिना पहले चरण को पूरा करने का प्रयास किया, जो कि d3.selectAll() का उपयोग करके तीन मंडलियों के रंग और त्रिज्या को बदलना है। मैंने यहां कई पदों के माध्यम से पढ़ा है और अन्य ट्यूटोरियल्स को देखा है, लेकिन मैं अपने जीवन के लिए सर्कल को नीला नहीं बना सकता। दुर्भाग्य से ट्यूटोरियल कभी भी अपने कोड की पूरी तरह से नहीं दिखाता है। मैं अपने ब्राउजर में तीन ब्लैक सर्कल (मूल एसवीजी) प्रदर्शित करने में सक्षम हूं लेकिन उन्हें चुनने और बदलाव करने के लिए डी 3 नहीं मिल रहा है। मुझे यह भी यकीन नहीं है कि क्या XML को HTML में एम्बेड किया गया है या यदि यह बाहरी है और किसी भी तरह से पढ़ा जाता है।

क्या कोई ऐसा HTML पोस्ट कर सकता है जिसे आप ऐसा करने के लिए उपयोग करेंगे? किसी भी सहायता की काफी सराहना की जाएगी।

<svg width="720" height="120"> 
<circle cx="40" cy="60" r="10"></circle> 
<circle cx="80" cy="60" r="10"></circle> 
    <circle cx="120" cy="60" r="10"></circle> 
</svg>

यहाँ और परिवर्तन करने के लिए कोड है::

यहाँ एक्सएमएल हलकों के लिए इसी है

var circle = d3.selectAll("circle"); 
circle.style("fill", "steelblue"); 
circle.attr("r", 30);

स्रोत

2015-07-21 e7h3r

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

आपका कोड सही है। मुझे लगता है कि आप इसे सही तरीके से एक साथ नहीं डाल रहे हैं। यहाँ कम से कम उदाहरण है:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <svg width="720" height="120"> 
 
     <circle cx="40" cy="60" r="10"></circle> 
 
     <circle cx="80" cy="60" r="10"></circle> 
 
     <circle cx="120" cy="60" r="10"></circle> 
 
    </svg> 
 
    <script> 
 
     var circle = d3.selectAll("circle"); 
 
     circle.style("fill", "steelblue"); 
 
     circle.attr("r", 30); 
 
    </script> 
 
    </body> 
 

 
</html>

स्रोत

2015-07-21 16:28:44 Mark

आपका कोड अच्छा लग रहा है, वहाँ एक और मुद्दा होना चाहिए। क्या होना चाहिए यह दिखाने के लिए इस पहेली को देखें। संक्रमण/अवधि/देरी को अनदेखा करें, यह बस सब कुछ धीमा करने के लिए है ताकि यह आसानी से दिखाई दे।

http://jsfiddle.net/s6u5my8k/

var circle = d3.selectAll('circle') 
    .transition().duration(750).delay(750) 
    .style('fill', 'steelblue') 
    .attr('r', 30);

स्रोत

2015-07-21 16:31:29 lhoworko

उत्तर

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