2013-01-17 17 views
6

मैं कुछ svg तत्व की शैली को बदलने की कोशिश कर रहा हूं। जब मैं इस कार्य करें:'selectAll' और 'select' समस्याओं के साथ शैली को बदलें

var circleSelected = d3.select("#circleid_2"); 
     circleSelected.style("fill", "purple"); 
     circleSelected.style("stroke-width", 5); 
     circleSelected.style("stroke", "red"); 

चक्र अपनी शैली बदल रहा है।

लेकिन, जब मैं ऐसा करते हैं:

var allCircles = d3.selectAll(".circle"); 
     allCircles.forEach(function (circle) { 
      circle.style("fill", "green"); //function(d) { return getNodeColor(d); } 
     }); 

यह त्रुटि के साथ काम नहीं करता है: ऑब्जेक्ट [वस्तु SVGCircleElement] कोई विधि 'शैली'

और यहाँ है मेरे 'चक्र' घोषणा (है नोट: इसमें कक्षा और आईडी दोनों हैं):

node.append("circle") 
      .attr("id", function (d) { return "circleid_" + d.id; }) 
      .attr("class", "circle") 
      .attr("cx", function (d) { return 0; }) 
      .attr("cy", function (d) { return 0; }) 
      .attr("r", function (d) { return getNodeSize(d); }) 
      .style("fill", function (d) { return getNodeColor(d); }) 
      .style("stroke", function (d) { return getNodeStrokeColor(d); }) 
      .style("stroke-width", function (d) { return getNodeStrokeWidth(d); }); 

मैं यहां क्या गलत कर रहा हूं? सहायता के लिए धन्यवाद!

+1

और यदि आप पुनरावृत्त करना चाहते हैं तो आपको प्रत्येक फ़ंक्शन का उपयोग करना चाहिए। इसे जांचें: https://github.com/d3/d3/wiki/Selections#each मेरे मामले में, कॉलबैक पैरामीटर प्राप्त नहीं कर रहा था, मुझे इसका उपयोग करना पड़ा: d3.select (यह) – camposer

उत्तर

9

प्रयास करें:

d3.selectAll("circle").style("fill", "green"); 

या:

allCircles.style("fill", "PaleGoldenRod"); 

स्पष्टीकरण: https://github.com/d3/d3/blob/master/API.md#selections-d3-selection

: d3.selectAll एक चयन है, जो काम करता है इस एपीआई में वर्णित का उपयोग कर अपना काम कर सकती वापस आ जाएगी हालांकि, जैसे ही आप forEach करते हैं, आंतरिक चर retur प्रत्येक बार circle एक वास्तविक डीओएम तत्व होगा - अब कोई चयन नहीं होगा, और इसलिए कोई style फ़ंक्शन संलग्न नहीं होगा।

+0

दिलचस्प .. अगर प्रत्येक के लिए एक डोम तत्व देता है, तो मैं इसे jQuery का उपयोग कर शैली कर सकते हैं, सही? – HotFrost

+0

हां, मिश्रण jquery और d3 एक बहुत ही आम प्रथा है। – GreySage