Question

我使用D3使用trapezoid来创建SVG.Area。有人可以告诉我是否有可能实现这一目标，如果是，请告诉我，因为我只能看到3位评估员x,y1 and y0。我不确定如何修复不同的x值

Answer 1

而不是d3.svg.area，您应该使用svg:polygon或d3.svg.line结合closepath命令来绘制梯形。

以下是我如何做的快速示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <script>
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
      
    var line = d3.svg.line()
      .x(function(d) {
        return d.x;
      })
      .y(function(d) {
        return d.y;
      });
    var points = [{
        x: 100, y: 100
      },{
        x: 400, y: 100
      },{
        x: 375, y: 150
      },{
        x: 125, y: 150
      }];
      
    svg.append('path')
      .attr("d", line(points) + 'Z')
      .style("fill", "orange")
      .style("stroke", "black");
        
  </script>
</body>

</html>

使用d3 svg.area创建梯形

1 个答案: