Как добавить тег перевода React i18n во всплывающую подсказку. html () в d3 - PullRequest
Новая
       31

Как добавить тег перевода React i18n во всплывающую подсказку. html () в d3

0 голосов
/ 10 июля 2020

Я дал код d3. По сути, это карта мира, на которой есть всплывающая подсказка для каждой страны. Теперь, поскольку приложение поддерживает и другие языки, названия стран, отображаемые во всплывающей подсказке, должны быть переведены на другие языки. Как я могу использовать тег внутри. html (). 

svg
  .selectAll('path')
  .data(countries.features)
  .enter()
  .append('path')
  .attr('d', path)
  .attr('class', 'country')
  .attr('fill', (d) => colorScale(colorValue(d)))
  .on('mouseover', function (d) {
    tooltip.transition().duration(200).style('opacity', 1);
    tooltip
      .html(
        `<div class= "tooltip_box">
    <Translation>
    {(t, { i18n }) => (
    <h4 class="tooltip_country">{t("page1:page1.countries."+CON)}</h4>
    )}
    </Translation>
    </div>`
      )
      .style('left', d3.event.pageX + 10 + 'px')
      .style('top', d3.event.pageY - 28 + 'px');
  })
  .on('mouseout', function (d) {
    tooltip.transition().duration(300).style('opacity', 0);
  });
...