उदाहरण के लिए यदि मेरे पास यह है

  <div>
    <g class="one"></g>
    <g class="two"></g>
    <g class="three"></g>
    <g class="four"></g>
    <g class="five"></g>
  </div>

अगर मैं एक और g कक्षा new के साथ दो g के बीच three और two के साथ सम्मिलित करना चाहता हूं।

जिसके परिणामस्वरूप

  <div>
    <g class="one"></g>
    <g class="two"></g>
    <g class="new"></g>
    <g class="three"></g>
    <g class="four"></g>
    <g class="five"></g>
  </div>

ये काम:

d3.select("div").insert("g", ".three").attr("class", "new");
d3.select("div").insert("g", ":nth-child(3)").attr("class", "new");

लेकिन यह काम नहीं करेगा अगर मेरे पास यह है और जहां लाइन है वहां कक्षा new के साथ g डालना चाहते हैं। (मैंने लाइनों का उपयोग किया है क्योंकि मुझे यकीन नहीं है कि मैं इसे सही तरीके से समझाऊंगा)

  <div>
    <g class="one">
      <g class="two">
        <circle></circle>
      </g>
      <g class="one">
        <circle></circle>
      </g>
      <g class="one">
        <circle></circle>
      </g>
    </g>
    <g class="one"></g>
    ------------------(this is where i want <g class="new"></g>)--------
    <g class="two"></g>
    <g class="one"></g>
    <g class="one"></g>
  </div>

क्या केवल div के नीचे के स्तर पर g की संख्या की गणना करके इसे सम्मिलित करना संभव है। जैसे दूसरे और तीसरे g टैग के बीच।

मैंने कुछ ऐसा करने की कोशिश की है:

d3.select("div").insert("g", "div > g, g:nth-of-type(3)").attr("class", "new");

मैंने एक समाधान निकाला:

d3.selectAll("g").filter("div > g").classed("temp", true);
d3.select("div").insert("g", ".temp:nth-of-type(3)").attr("class", "new");
d3.selectAll(".temp").classed("temp", false);

लेकिन यह वास्तव में अक्षम लगता है।

-2
tom c 7 अक्टूबर 2018, 08:08

1 उत्तर

सबसे बढ़िया उत्तर

निम्नलिखित आपके लिए काम करना चाहिए:

d3.select("div").insert("g", ".three").attr("class", "new");

यह रहा एक वर्किंग फिडल

यदि आप किसी विशिष्ट वर्ग के बजाय nth तत्व के बाद सम्मिलित करना चाहते हैं, तो आप कुछ ऐसा कर सकते हैं:

d3.select("div").insert("g", ":nth-child(3)").attr("class", "new");

यदि आपको और अधिक लचीलेपन की आवश्यकता है (हो सकता है कि आपके पास उस div में g के अलावा अन्य तत्व हों), तो आप nth g से पहले इस तरह सम्मिलित कर सकते हैं:

d3.select("div").insert("g", "g:nth-of-type(3)").attr("class", "new");

संपादित करें:

अभी भी स्पष्ट नहीं है कि आप क्या हासिल करने की कोशिश कर रहे हैं, लेकिन यह मेरा आखिरी प्रयास है:

d3.select("div").insert("g", "div > g:nth-of-type(3)").attr("class", "new").append("text").text("new ");

कोडपेन

यह तीसरे g तत्व से पहले नया g सम्मिलित करेगा जो कि div का सीधा बच्चा है। इसका कक्षाओं से कोई लेना-देना नहीं है, मुझे नहीं पता कि आपने पहली बार कक्षाओं का उल्लेख क्यों किया, खासकर यदि आप जानते थे कि वे अद्वितीय नहीं थे, लेकिन आपका उदाहरण ऐसा प्रतीत होता है जैसे कि ऐसा था।

आपको इसे पढ़ना चाहिए।

1
Danny Buonocore 7 अक्टूबर 2018, 17:54