Регулировка положения шрифта-иконки в React - PullRequest
Новая
       11

Регулировка положения шрифта-иконки в React

0 голосов
/ 09 октября 2018

Я не могу выровнять потрясающие иконки для каждого столбца диаграммы d3.Сама диаграмма d3 ограничена svg, который имеет только ширину и высоту в качестве свойств.Я проверил консоль, и никакие значки svg (в переводе с тегов реагировать-fontawesome FontAwesomeIcon) не отображаются.

Компонент: 

  displayIcon = (e, style) => {
    if (e == 'A') {
      return <div style={style}><FontAwesomeIcon icon="arrow-up" color="black" /></div>
    } else if (e == 'B') {
      return <div style={style}><FontAwesomeIcon icon="arrow-down" color="black" /></div>
    } else {
      return ''
    }
  }

render() {

    const textFinishStatus = (
      data.map( d =>
         {this.displayIcon(d.status, {transform: `translate(${xScale(d.colX)}px, ${yScale(d.colY)-20}px)`})}
      )
    )

    return (
      <g>
      {bars}
      {icon}
      </g>
    )
}

Тест с одним значком: IЯ также выделил проблему только одному значку, но я все еще не могу отрегулировать положение этого значка в svg в нужном месте.

«Ширина» и «высота» определяет размер значка.Я считаю, что «transform» перемещает значок на 937px вправо и на 50px вниз по отношению к ограничивающему svg. 

<FontAwesomeIcon icon="wrench" width="20px" height="20px" color="black" transform="translate(937px, 50px)" />

, что переводится в DOM: 

    <svg transform="translate(937px, 50px)">
    <svg aria-hidden="true" data-prefix="fas" data-icon="wrench"class="svg-inline--fa fa-wrench fa-w-16 " 
role="img" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 512 512" width="20px" height="20px" color="black">
<path fill="currentColor" d="path....."></path>
    </svg>
    </svg>

Обновление: другой метод, который я попробовал ... В этом случае значки появились, но все выровнены по краю ограничивающего SVG, несмотря на установку свойства transform. 

  displayIcon = (e) => {
    if (e == 'A') {
      return <FontAwesomeIcon icon="arrow-up" color="black" /></div>
    } else if (e == 'B') {
      return <FontAwesomeIcon icon="arrow-down" color="black" /></div>
    } else {
      return ''
    }
  }

const textFinishStatus = (
  data.map( d =>
    <svg 
      width={20}
      height={20}
      transform={"translate(" + xScale(d.colX) + "," + yScale(d.colY) + ")"}
    >
     {this.displayIcon(d.status)}
    </svg>
  )
)
...