Question

我无法使fontawesome图标与d3图表的每个条形对齐。 d3图表本身受svg限制，该SVG仅具有宽度和高度作为属性。我检查了控制台，没有渲染任何svg图标（从react-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>
    )
}

使用单个图标进行测试： 我也将问题仅隔离到一个图标上，但是我仍然无法将该图标在svg中的位置调整到所需位置。

“宽度”和“高度”指定图标的大小。我相信“转换”会将图标937px相对于边界svg向右移动50px。

<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>

更新：我尝试过的另一种方法... 在这种情况下，尽管设置了transform属性，但图标还是出现了，但所有图标都与边界svg的边缘对齐。

  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>
  )
)

调整React中的真棒字体图标的位置

0 个答案: