D3 - Распределить <text>по вертикали внутри SVG + высота SVG, равная дочерним элементам внутри него - PullRequest
Новая
       76

D3 - Распределить <text>по вертикали внутри SVG + высота SVG, равная дочерним элементам внутри него

0 голосов
/ 29 мая 2020

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

    const tooltipContainer = d3.select(".stackedChart").append("div")
      .attr("class", css.divBox)
      .style("opacity", 0);

    const tooltipBox = tooltipContainer.append('svg')

    dataset.forEach(set => {
      tooltipLabels.push(tooltipBox.append('text').attr('class', css.tooltipLabel))
    })

Я добавляю несколько <text> внутри SVG, и я ' m распределяет этот <text> странным образом.

tooltipLabels[index].attr('y', (index * 15) + "px")

Это проверяет индекс для каждого элемента данных, который я добавляю, и устанавливает его координату Y в соответствии с ним.

  1. Как лучше всего распределить по вертикали кучу <text>, которую я добавляю в свой SVG?

Я также в настоящее время сталкивается с проблемой высоты (вероятно, из-за того, как я распространяю свои метки всплывающих подсказок), и я хочу, чтобы высота моего SVG была равна полной высоте, составленной всеми моими <text>, но я не могу понять, как я могу достичь этот? Должен ли я сначала добавить g, а только потом добавить к нему mt <text>. И что дальше?

Как сделать так, чтобы высота моего SVG была равна группе добавленных внутри него?
...