Saya ingin menggambar beberapa kotak teks dan merantainya dengan garis panah. Saya menggunakan kode di bawah ini untuk menggambar kotak teks beberapa masalah di sana:

  1. kotak teks berwarna hitam dan tidak ada teks yang ditampilkan di sana.
  2. Satu kotak hilang, seharusnya 5 kotak tetapi hanya 4 yang bisa dilihat.
  3. bagaimana saya bisa menambahkan garis panah untuk menghubungkan satu sama lain!
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 Mei 2021, 21:22

1 menjawab

Jawaban Terbaik
  1. kotak teks berwarna hitam dan tidak ada teks yang ditampilkan.

Anda tidak menambahkan teks apa pun. Teks juga tidak dapat ditambahkan ke persegi panjang, jadi tidak perlu menerapkan properti font ke persegi panjang. Teks dapat ditambahkan ke g. Jadi kita bisa menggunakan induk g untuk menahan persegi panjang dan teks. Sesuatu seperti:

group.append("rect")...

group.append("text")...

Kotak berwarna hitam karena Anda belum menerapkan isian. Isi default adalah hitam.

  1. Satu kotak hilang, seharusnya 5 kotak tetapi hanya 4 yang bisa dilihat.

Ini karena ketika Anda memasukkan elemen induk g, Anda memilih semua elemen g. Ini termasuk yang sudah Anda tambahkan (svg.append("g")). Pemilihan enter dimaksudkan untuk membuat elemen sedemikian rupa sehingga setiap item dalam larik data dipasangkan dengan elemen di DOM. Karena Anda sudah memiliki g dalam pilihan Anda, pilihan enter hanya akan membuat 4 yang baru (mewakili item array data dengan indeks 1-4 tetapi tidak 0).

Alih-alih selectAll("g") Anda dapat menentukan nama kelas atau, jika Anda hanya ingin memasukkan semuanya dan tidak perlu memperbarui pilihan: selectAll(null). Opsi terakhir akan selalu mengembalikan pilihan kosong, yang akan menghasilkan pilihan enter yang berisi satu elemen per item dalam larik data.

Perhatikan, bahwa datum induk diteruskan ke anak yang ditambahkan secara otomatis, tidak perlu menggunakan metode .data untuk meneruskan ini kecuali Anda menangani data bersarang.

Berikut ini cuplikan yang menangani masalah dalam satu dan dua:

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>

Saya juga mengubah svg untuk merujuk ke induk g, yang menerapkan margin. Sebelum g dengan margin tetap tidak digunakan, bersama dengan margin. Saya juga memodifikasi jarak untuk menjaga semuanya tetap terlihat.

  1. bagaimana saya bisa menambahkan garis panah untuk menghubungkan satu sama lain!

Ini dapat dilakukan dengan banyak cara dan benar-benar merupakan masalah yang terpisah dari yang lain, jadi saya hanya akan segera menunjukkan salah satu dari banyak pilihan. Saya akan sedikit mengubah struktur data Anda sehingga setiap datum memiliki data posisi dan kemudian menambahkan panah menggunakan penanda SVG:

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 Mei 2021, 20:08