Ярлык не сгруппирован по центру гистограммы, чтобы не было 5 - PullRequest
Новая
       58

Ярлык не сгруппирован по центру гистограммы, чтобы не было 5

0 голосов
/ 31 января 2020

У меня возникла проблема с центрированием метки, когда сгруппированная гистограмма не превышает 5.Пример, подобный этому.

Изображение, когда сгруппированная гистограмма имеет 5

enter image description here

И это изображение при сгруппированной гистограмме, чтобы не превышать 5. Ярлыки не по центру

enter image description here

Это демо для справки jsfiddle и ниже код

Мой код 

function drawChart(nested) {
          const t = d3.transition()
              .duration(1000)
              .ease(d3.easeLinear)


          const barGroup = chartLayer.selectAll(".bar-group")
              .data(nested)

          const newBarGroup = barGroup.enter().append("g").attr("class", "bar-group").style('text-align', 'center;')


          barGroup.merge(newBarGroup)
              .attr("transform", function (d) { return "translate(" + [xScale(d.key), 0] + ")"; });


          const bar = newBarGroup.selectAll(".bar")
              .data(function (d) { return d.val })

          const newBar = bar.enter().append("rect").attr("class", "bar")

          d3.select("body").select('#tooltip2').remove();
          var tooltip = d3.select("body").append("div")
              .attr('id', 'tooltip2')
              .style('position', 'absolute')
              .style("background-color", "#fff")
              .style('box-shadow', '1px 2px 4px rgba(0, 0, 0, .5)')
              .style('padding', '15px')
              .style('display', 'none')

          bar.merge(newBar)
              .attr("width", xInScale.bandwidth())
              .attr("height", 0)
              .attr("fill", function (d) { return color(d.key); })
              .attr("transform", function (d) { return "translate(" + [xInScale(d.key), chartHeight] + ")" })
              .on("mousemove", function(d) {
                //console.log('mousemove', d);
                tooltip
                .style('display', 'block')
                .style('left', () => {
                  return `${d3.event.pageX + 20}px`
                })
                .style('top', `${d3.event.pageY - 20}px`)
                .style('font-size', 13)
                .style("display", "inline-block")
                .html((d.key) + "<br>" + + (d.value));
              })
              .on("mouseout", function(d){ tooltip.style("display", "none");});

          bar.merge(newBar).transition(t)
              .attr("height", function (d) { return chartHeight - yScale(d.value); })
              .attr("transform", function (d) { return "translate(" + [xInScale(d.key), yScale(d.value)] + ")" })


              let label = newBarGroup
              .append('text')
              .text((d) => {
                  return d.key
              })
              .style('transform', 'translate(35px, 350px)')
              .attr("dy", "0em")
              .style('font-size', 12)
              .style('text-anchor', 'middle')
              .call(wrap, 80);
              console.log(label)
      }

1 Ответ

0 голосов
/ 03 февраля 2020

Я решил свою проблему 

let mwidth = xInScale.bandwidth() * 3 / 2
              let label = newBarGroup
              .append('text')
              .text((d) => {
                console.log(d.key)
                  return d.key
              })
              .style('transform', `translate(${mwidth}px, 350px)`)
              .attr("dy", "0em")
              .style('font-size', 12)
              .style('text-anchor', 'middle')
              .call(wrap, 80);
...