使用d3创建梯形svg.area

我用D3打破了我的目的，使用SVG.Area创建trapezoid。谁能告诉我它是否能够实现这一点，如果有，请介绍一下我，我只能看到3评审x,y1 and y0 .I'm不知道我该如何解决不同x值使用d3创建梯形svg.area

来源

2015-11-16 Arrif

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

下面是如何我做一个简单的例子：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" 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>

来源

2015-11-16 13:59:01 Mark

使用d3创建梯形svg.area

回答

相关问题