时间戳

首页 > 解决方案 > 用颜色填充 D3 箭头

javascript - 用颜色填充 D3 箭头

问题描述

我设法用 D3 绘制了一个动态改变方向和大小的箭头。现在，我想用颜色填充封装区域。但是，我用一连串的线绘制了箭头轮廓，所以我不确定如何告诉 D3 该区域已关闭并准备好填充？

    for (let i = 0; i < ARROW_SHAPE.length - 1; i++){


      const x1: number = ARROW_SHAPE[i][0] * Math.cos(angle) - ARROW_SHAPE[i][1] * Math.sin(angle);
      const y1: number = ARROW_SHAPE[i][0] * Math.sin(angle) + ARROW_SHAPE[i][1] * Math.cos(angle);

      const x2: number = ARROW_SHAPE[i + 1][0] * Math.cos(angle) - ARROW_SHAPE[i + 1][1] * Math.sin(angle);
      const y2: number = ARROW_SHAPE[i + 1][0] * Math.sin(angle) + ARROW_SHAPE[i + 1][1] * Math.cos(angle);

      this.g.append('line')
        .attr('stroke', color)
        .attr('stroke-width', 4)
        .attr('x1', x1 * size)
        .attr('y1', y1 * size)
        .attr('x2', x2 * size)
        .attr('y2', y2 * size);
    }

我应该如何调整我的虚拟代码以从我的线条中创建一个多边形并允许它被填充？

标签： javascriptsvgd3.js

解决方案

不要从一系列单独的线中创建箭头。改为创建 a<polygon>或 a 。<path>多边形是最简单的。

const arrow = [];
for (let i = 0; i < ARROW_SHAPE.length - 1; i++){
  arrow.push( ARROW_SHAPE[i][0] * Math.cos(angle) - ARROW_SHAPE[i][1] * Math.sin(angle))
  arrow.push(ARROW_SHAPE[i][0] * Math.sin(angle) + ARROW_SHAPE[i][1] * Math.cos(angle));
}

this.g.append('polygon')
  .attr('fill', color)
  .attr('stroke-width', 4)
  .attr('points', arrow.join(','))

推荐阅读