javascript - React.js 和 D3，向强制有向图添加箭头

Question

我正在密切关注将 D3 与此处给出的 React 相结合的方法。

通过这种模式，结构和渲染由 React 完成，计算由 d3 处理。

var links = _.map(this.props.links, (link) => {
  return (
    <line className='link' key={link.key} strokeWidth={link.size}
      x1={link.source.x} x2={link.target.x} y1={link.source.y} y2={link.target.y} />
  );
});

此代码段用于在两个节点之间绘制边（链接）。我是 d3 的新手，所以我想知道如何添加一个箭头来指示两个节点之间的源-> 目标关系？该箭头应该在目标节点旁边。

Answer 1

以http://bl.ocks.org/fancellu/2c782394602a93921faff74e594d1bb1为例

render() {
    // use React to draw all the nodes, d3 calculates the x and y
    var nodes = _.map(this.props.nodes, (node) => {
      var transform = 'translate(' + node.x + ',' + node.y + ')';
      return (
        <g className='node' key={node.key} transform={transform}>
          <circle r={node.size} />
          <text x={node.size + 5} dy='.35em'>{node.key}</text>
        </g>
      );
    });
    var links = _.map(this.props.links, (link) => {
      return (
        <line className='link' marker-end="url(#arrowhead)" key={link.key} strokeWidth={link.size}
          x1={link.source.x} x2={link.target.x} y1={link.source.y} y2={link.target.y} />
      );
    });

    return (
      <svg width={width} height={height}>
        <defs>
          <marker id="arrowhead" viewBox="-0 -5 10 10" refX="13" refY="0" orient="auto" markerWidth="13" markerHeight="13" xoverflow="visible">
            <path d="M 0,-5 L 10 ,0 L 0,5" fill="#999" style="stroke: none;"></path>
          </marker>
        </defs>
        <g>
          {links}
          {nodes}
        </g>
      </svg>
    );
  }