डी 3 - सीएसएस कक्षा

Question

के माध्यम से टेक्स्ट रंग सेट नहीं कर सकता मैं जावास्क्रिप्ट चार्ट बनाने के लिए d3.js का उपयोग कर रहा हूं, और जितना संभव हो सके व्यवहार से अपनी स्टाइल को अलग करने की कोशिश कर रहा हूं। ऐसा करने के लिए, मैं .style ('वर्ग', '...') विधि का उपयोग कर .style() विधि का उपयोग करने के बजाय सीएसएस कक्षाओं को लागू करने की कोशिश कर रहा हूं। अधिकांश भाग के लिए सब कुछ ठीक काम करता है। हालांकि, जब मैं स्ट्रोक सेट करने और कुछ पाठ तत्वों को भरने के लिए एक सीएसएस वर्ग लागू करने का प्रयास करता हूं, तो यह काम नहीं करता है। जिस हिस्से में मुझे उलझन में डाल दिया गया है वह तथ्य यह है कि एक सीएसएस वर्ग लागू करने के लिए .attr() का उपयोग करने की एक ही प्रक्रिया ग्राफ के बार के लिए ठीक काम करती है, और मुझे टेक्स्ट को स्टाइल करने में कोई समस्या नहीं है, अगर मैं सटीक का उपयोग करता हूं एक ही विशेषताएँ, लेकिन इसके बजाय .style() विधि के साथ प्रत्येक को अलग-अलग सेट करने के लिए। और भी विचित्र, मैं किसी भी मुद्दे के बिना सीएसएस के माध्यम से पारदर्शिता कक्षा लागू करने के लिए .attr() विधि का उपयोग कर सकता हूं। क्या वहां कुछ ऐसा है, जिसकी कमी मुझे यहां खल रही है?

ये सवाल में सीएसएस वर्ग हैं:

.black { 
    fill: rgb(41,41,41); 
    stroke: rgb(41,41,41); 
} 

.red { 
    fill: rgb(238,77,77); 
    stroke: rgb(238,77,77); 
    color: rgb(238,77,77); 
} 

.blue { 
    fill: rgb(76,179,230); 
    stroke: rgb(76,179,230); 
} 

.white { 
    fill: rgb(255,255,255); 
    stroke: rgb(255,255,255); 
} 

और इस कोड है कि किसी कारण से काम नहीं करता है:

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //this line isn't doing its job 
     .attr('class','white') 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() }); 

जबकि इस कोड है:

var severityText = chart.selectAll(".severity") 
     .data(array) 
     .enter().append("text") 
     .attr("x", function (d, i) { return x(i) + barWidth/2 - (5.0/8)*barNumberSize; }) 
     .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius/2 - bubbleNumberSize*(1.0/4) }) 
     .style("font-size", bubbleNumberSize.toString() + "px") 
     //works fine when written in this format.....why? 
     .style('fill',white) 
     .style('stroke',white) 
     .attr('class','transparent') 
     .text(function (d, i) { return d['severity'].toString() }); 

Answer 1

एकाधिक कक्षाएं सेट करने के लिए, एक सिंगल स्ट्रिंग का उपयोग करें जिसमें कॉल को चेन करने के बजाए उनमें से सभी शामिल हैं, जो वाई इसे ओवरराइट कर देंगे।

है,

.attr('class','white') 
.attr('class','transparent') 

के बजाय कर

.attr('class', 'white transparent') 

Answer 2

यह बेहतर वर्गीकृत उपयोग करने के लिए

.classed('white', true); 

या यहाँ तक कि

.classed('white transparent', true); 

यह बहुत सारी किताबों को बचाता है कि बाद में किस श्रेणी को सेट/हटा दिया गया था। प्रदान किया गया डेटा जोड़ना कक्षा का नाम अधिक कठिन है। देखें यानी http://bl.ocks.org/clemens-tolboom/7231676