d3.js - 使用 d3 svg.area 创建梯形

标签 d3.js svg

我快崩溃了 D3用于创建 trapezoid使用 SVG.Area .
有人可以告诉我是否有可能实现这一点,如果是,请简要介绍一下,因为我只能看到 3 个评估员 x,y1 and y0 .我不知道如何修复不同的 x值(value)

enter image description here

最佳答案

而不是 d3.svg.area ,你应该使用 svg:polygond3.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.js - 使用 d3 svg.area 创建梯形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33735487/

相关文章:

d3.js - 正确缩放 DOT 图形

javascript - D3v4 timeParse 始终返回 null

javascript - 将函数应用于数组的每个元素

reactjs - 您如何使用 Parcel 2 在 React 中使用内联 SVG?

javascript - 无论位置如何,如何获得一致的笔划宽度?

javascript - 如何为具有多个 y 轴的多线图表中的每一行分配特定 id

javascript - D3 - 多折线图,第二线圆圈不显示

html - 如何使用多个不同大小的 SVG

javascript - 在所有树节点上渲染指针仪表时出现问题

svg - ffmpeg 支持 svg 光栅化