मैं कुछ टेक्स्ट बॉक्स बनाना चाहता हूं और इसे तीर रेखाओं से श्रृंखलाबद्ध करना चाहता हूं। मैं टेक्स्ट बॉक्स को कुछ मुद्दों पर खींचने के लिए नीचे दिए गए कोड का उपयोग करता हूं:

  1. टेक्स्ट बॉक्स काला है और वहां कोई टेक्स्ट शो नहीं है।
  2. एक बॉक्स गायब है, यह 5 बॉक्स होना चाहिए लेकिन केवल 4 ही देखा जा सकता है।
  3. मैं एक दूसरे को जोड़ने के लिए एक तीर रेखा कैसे जोड़ सकता हूँ!
test()
function test() {
  var data = ["a","b","c","d","e"]
  
  width = 800
  height = 600
  margin = 10
  
  //var svg = d3.select("svg");
  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom);
  
  svg.style("border","5px solid red");

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var group = svg.selectAll('g')
      .data(data).enter()
      .append('g')
      .attr('transform',function(d,i) {
        //console.log(i,d);
        return 'translate('+(100*i)+',0)';
      });
  
  var box = group.selectAll('rect')
      .data(function(d) {
        return d;
      });
  
  box.enter()
    .append("rect")
    .attr("width", 30)
    .attr("height", 30)
    .attr('font-size',2)
    .attr("x", function(d, i) { 
    //console.log(d);
    return 60 + 2*d; 
  })  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
1
lucky1928 12 मई 2021, 21:22

1 उत्तर

सबसे बढ़िया उत्तर
  1. टेक्स्ट बॉक्स काला है और कोई टेक्स्ट नहीं दिखाया गया है।

आप कोई टेक्स्ट नहीं जोड़ रहे हैं। पाठ को आयत में भी नहीं जोड़ा जा सकता है, इसलिए आयत में फ़ॉन्ट गुण लागू करने की कोई आवश्यकता नहीं है। हालांकि टेक्स्ट को g में जोड़ा जा सकता है। इसलिए हम आयत और टेक्स्ट दोनों को रखने के लिए एक पैरेंट g का उपयोग कर सकते हैं। कुछ इस तरह:

group.append("rect")...

group.append("text")...

बॉक्स काले हैं क्योंकि आपने भरण लागू नहीं किया है। डिफ़ॉल्ट भरण काला है।

  1. एक बॉक्स गायब है, यह 5 बॉक्स होना चाहिए लेकिन केवल 4 ही देखा जा सकता है।

ऐसा इसलिए है क्योंकि जब आप पैरेंट g एलीमेंट दर्ज करते हैं, तो आप सभी g एलीमेंट का चयन करते हैं। इसमें वह शामिल है जिसे आप पहले ही जोड़ चुके हैं (svg.append("g"))। एंटर चयन का उद्देश्य ऐसे तत्व बनाना है जैसे डेटा सरणी में प्रत्येक आइटम को DOM में एक तत्व के साथ जोड़ा जाता है। चूंकि आपके चयन में पहले से ही एक g है, इसलिए एंटर चयन केवल 4 नए बनाएगा (इंडेक्स 1-4 के साथ डेटा सरणी आइटम का प्रतिनिधित्व करता है लेकिन 0 नहीं)।

selectAll("g") के बजाय आप एक वर्ग का नाम निर्दिष्ट कर सकते हैं या, यदि आप बस सब कुछ दर्ज करना चाहते हैं और चयन को कभी भी अपडेट करने की आवश्यकता नहीं है: selectAll(null)। बाद वाला विकल्प हमेशा एक खाली चयन लौटाएगा, जिसके परिणामस्वरूप डेटा सरणी में प्रति आइटम एक तत्व युक्त प्रवेश चयन होगा।

ध्यान दें, कि माता-पिता का डेटा संलग्न बच्चों को स्वचालित रूप से पास कर दिया जाता है, इसे आगे बढ़ाने के लिए .data पद्धति का उपयोग करने की कोई आवश्यकता नहीं है जब तक कि आप नेस्टेड डेटा को प्रबंधित नहीं कर रहे हैं।

यहां एक और दो में समस्याओं का समाधान करने वाला एक स्निपेट दिया गया है:

test()
function test() {
  var data = ["a","b","c","d","e"]
  
  width = 800
  height = 600
  margin = 10

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .style("border","5px solid red");
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var group = svg.selectAll(null)
      .data(data).enter()
      .append('g')
      .attr('transform',function(d,i) {
        return 'translate('+(40*i)+',0)';
      });
  
  group
    .append("rect")
    .attr("width", 30)
    .attr("height", 30)
    .attr("fill","yellow")

  group.append("text")
    .text(function(d) { return d; })
    .attr("y", 20)
    .attr("x", 15)
    .attr("text-anchor","middle");

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

मैंने मूल g को संदर्भित करने के लिए svg को भी बदल दिया है, जिस पर मार्जिन लागू है। इससे पहले g मार्जिन के साथ मार्जिन के साथ अप्रयुक्त रहा। मैंने सब कुछ ध्यान में रखने के लिए रिक्ति को भी संशोधित किया है।

  1. मैं एक दूसरे को जोड़ने के लिए एक तीर रेखा कैसे जोड़ सकता हूँ!

यह कई तरीकों से किया जा सकता है और वास्तव में यह दूसरों से अलग मुद्दा है, इसलिए मैं कई विकल्पों में से केवल एक को शीघ्रता से प्रदर्शित करूंगा। मैं आपकी डेटा संरचना को थोड़ा संशोधित करूंगा ताकि प्रत्येक डेटा में स्थितीय डेटा हो और फिर एसवीजी मार्करों का उपयोग करके तीर जोड़ें:

test()
function test() {
  var data = [{name:"a"},{name:"b"},{name:"c"},{name:"d"},{name:"e"}]
  
  width = 800
  height = 600
  margin = 10

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .style("border","5px solid red")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    
  svg.append("defs")
    .append("marker")
    .attr("id","pointer")
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient","auto")
    .attr("refY", 5)
    .append("path")
    .attr("d", "M 0 0 L 10 5 L 0 10 z")
    
  
  var group = svg.selectAll(null)
      .data(data).enter()
      .append('g')
      .attr('transform',function(d,i) {
        d.x = 40*i+15, d.y=30;
        return 'translate('+(40*i)+',0)';
      });
  
  group
    .append("rect")
    .attr("width", 30)
    .attr("height", 30)
    .attr("fill","yellow")

  group.append("text")
    .text(function(d) { return d.name; })
    .attr("y", 20)
    .attr("x", 15)
    .attr("text-anchor","middle");
    
    
   links = [
     {source: data[0], target: data[1]},
     {source: data[0], target: data[2]}
   ]
   
   svg.selectAll(null)
     .data(links)
     .enter()
     .append("path")
     .attr("d", function(d) {
        var midX = (d.source.x+d.target.x)/2;
        return "M"+d.source.x+" "+d.source.y+"Q"+midX+" "+200+" "+d.target.x+" "+(d.target.y+6);
     })
     .attr("fill","none")
     .attr("stroke","black")
     .attr("stroke-width",1)
     .attr("marker-end","url(#pointer)");
  
  

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
2
Andrew Reid 12 मई 2021, 23:08