如何使用FormattedMessage将对象转换为字符串，以便在d3.js图表中使用REACTJs渲染标签？

import { FormattedMessage } from 'react-intl';
import * as d3 from 'd3';

const data = [
  { name: 'Apple', value: 10 },
  { name: 'Orange', value: 15 },
  { name: 'Banana', value: 8 }
];

const svg = d3.select('svg');
const chart = svg.append('g');

const bars = chart.selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .attr('transform', (d, i) => `translate(0, ${i * 30})`);

bars.append('text')
  .attr('x', d => d.value + 10)
  .attr('y', 20)
  .text(d => <FormattedMessage id={d.name} />);

class Chart extends React.Component {
  render() {
    return (
      <div>
        <svg width="300" height="90">
          <g transform="translate(10, 10)">
            {chart}
          </g>
        </svg>
      </div>
    );
  }
}

ReactDOM.render(<Chart />, document.getElementById('root'));