текст не отображается в d3.append

Question

пытается показать всплывающую подсказку на прямоугольнике в d3 js, она отображается, но текст теперь отображается.

из исследования других проблем я узнал, что не могу добавить «текст» к «rect»

добавил 'g' для обоих прямоугольников, а затем текстовый элемент добавляется при наведении курсора мыши, но все еще не отображается . также исправлена ​​более ранняя проблема (спасибо Алану) с 'g', ведущим в никуда, но по-прежнему проблема с тем, что текст не отображается.

const rects = svg.selectAll('g')
      .data(dataset); 

  rects.enter()
      .append('g')
      .on("mouseover", function() {
        d3.select(this)
        .transition()
        .duration(100)
        .attr("opacity", 0.9)
        .append('text')
        .attr("fill","black")
        .attr('x', 0)
        .attr('y',100)
        .text('Hello')
        }) 
      .append('rect')
      .attr('x', 0)
      .attr('width', 0)
      .attr('height', height)
      .attr('fill', function(d, i) {
        return z(i)
      })         
    .merge(rects)
      .transition()
      .duration(300)
        .attr('x', d => x(d.y0))
        .attr('width', d => x(d.y));

Answer 1

Вы добавляете текст в ag в никуда, потому что d3.select ('g') не добавляется к вашему g. Итак, что вам нужно сделать, это установить курсор мыши на первое добавление ('g'), а затем в обратном вызове добавить к этому. Примерно так:

rects.enter()
      .append('g')
      .on("mouseover", function() {
        d3.select(this)
        .transition()
        .duration(100)
        .attr("opacity", 0.9)
        .append('text')
        .attr("fill","black")
        .attr('x', 0)
        .attr('y',100)
        .text('Hello')
      })
      .append('rect')
      .attr('x', 0)
      .attr('width', 0)
      .attr('height', height)
      .attr('fill', function(d, i) {
        return z(i)
      })
     ;

Answer 2

решено!

текст рисовался за пределами svg. приведенный ниже код позволяет отображать текст под прямоугольниками

      const rects = svg.selectAll('g')
      .data(dataset); 

  rects.enter()
      .append('g')  
      .append('rect')
      .attr('x', 0)
      .attr('width', 0)
      .attr('height', height-150)
      .attr('fill', function(d, i) {
        return z(i)
      })
       .on("mouseover", function() {
        d3.select(this)
        .transition()
        .duration(100)
        .attr("opacity", 0.9);
        d3.select('g')
        .append('text')
        .attr("fill","black")
        .attr('x', 15)
        .attr('y',height - 130)
        .text('Hello')
        })
        .on("mouseleave", function() {
        d3.select(this)
        .transition()
        .duration(300)
        .attr("opacity", 1)
        svg.selectAll('text').remove();
        console.log("in mouse exit"); 
        })          
    .merge(rects)
      .transition()
      .duration(300)
        .attr('x', d => x(d.y0))
        .attr('width', d => x(d.y));