Saya memiliki bagan kolom yang dikelompokkan di notebook ini .

Kolom dikelompokkan per groupKey (dalam hal ini tahun).

Bagaimana cara menampilkan groupKey di tooltip per kolom? (Saya dapat menunjukkan kunci dan nilai kolom)

Saya dapat melihat bahwa data terikat ke parentNode "g":

enter image description here

var groups = svg.append("g")
.selectAll("g")
.data(data)
.join("g")
  .attr("transform", d => 'translate(' + x0(d[groupKey]) + ',0)')
  .attr("class", "barsgroup");

Jadi ketika saya menambahkan rect untuk setiap kolom:

 var rects = groups.selectAll("rect")
    .data(d => keys.map(key => ({key, value: d[key]})))
    .join("rect")
      .attr("x", d => x1(d.key))
      .attr("y", d => y(d.value))
      .attr("width", x1.bandwidth())
      .attr("height", d => y(0) - y(d.value))
      .attr("fill", d => color(d.key))
      .append("title")
      .text(d => d.key + ": " + d.value);
      //.text(function (d, i, node) {return node.parentNode.__data__.value + ", " + d.key + ": " + d.value});

Saya ingin mengakses kunci grup (tahun) dari data asli. Tetapi data yang terikat ke rect hanyalah kunci & nilai (dalam setiap grup) jadi saya tidak memiliki nilai groupkey dan groupkey pada level ini. Upaya saya untuk mendapatkannya dari elemen induk "g" seperti:

//.text(function (d, i, node) {return node.parentNode.__data__.value + ", " + d.key + ": " + d.value});

Ini berdasarkan beberapa sumber, mis. pertanyaan ini dan deskripsi ini tetapi saya tidak dapat menyelesaikannya.

Tolong bantu? :) Terima kasih!

1
Wouter 30 Juni 2020, 16:56

1 menjawab

Jawaban Terbaik

Pertama, kerja bagus, karena Anda hampir mendapatkannya! Saya telah memotong Anda notebook untuk memperjelas, tetapi pada dasarnya, Anda hanya melintasi DOM satu tingkat, dan belum mencapai tingkat yang lebih tinggi.

Berikut cuplikan yang relevan:

.text((d,i,n) => {

const yearNode = d3.select(n[i])
.node()
.parentNode
.parentNode

const selectedYear = d3.select(yearNode)
.data()[0]
.Year

console.log(selectedYear);

        d.key + ": " + d.value
      });

Seperti yang Anda lihat, kode di atas bergerak ke atas dua simpul induk, pertama ke elemen rect dan kemudian ke elemen g.

Selanjutnya, kita memilih node ini menggunakan d3, mengakses atribut datanya menggunakan metode .data(), dan mendapatkan nilai tahun menggunakan kunci Year.

1
scrollex 3 Juli 2020, 17:13