гистограмма d3.v4 с использованием d3.tip - PullRequest
Новая
       23

гистограмма d3.v4 с использованием d3.tip

0 голосов
/ 26 февраля 2019

В настоящее время значение гистограммы d3 работает, но оно вызывается при наведении мыши: 

 g.append('g')
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .attr('transform', d => 'translate(' + x0(d.State) + ',0)')
    .selectAll('rect')
    .data(d => keys.map(key => {return {key: key, value: d[key]}}))
    .enter().append('rect')
     .attr('x', d => x1(d.key))
     .attr('y', d => y(d.value))
     .attr('width', x1.bandwidth())
     .attr('height', d => innerHeight - y(d.value))
     .attr('fill', d =>  z(d.key))
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

Вот код, использующий d3.tip 

const tip = d3.tip()
 .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {

   return "<strong><b style='color:#a9a9a9;font-size:18px;'>"+d.key+"</b>:</strong> <span class="+ GColor(d.key) +" style=font-size:16px; border: 1px solid green; padding: 0 20px 0 0 ><br><br>" + d.value + "</span>";
                      })

Этот код работает с использованием mouse hoverи d3.tip html отображается сверху.

Но вопрос таков: возможно ли отобразить d.value при создании .enter().append('rect') сразу после создания rect без mouse hover кода?

iv'e попробовал какую-то попытку, но безуспешно заменив этот код 

.on('mouseover', tip.show)

что-то вроде .append('text').Text(d.value)

Любая отличная идея очень ценится.

...