2015-11-16 58 views
3

我用D3打破了我的目的,使用SVG.Area創建trapezoid。 誰能告訴我它是否能夠實現這一點,如果有,請介紹一下我,我只能看到3評審x,y1 and y0 .I'm不知道我該如何解決不同x使用d3創建梯形svg.area

enter image description here

回答

3

而不是d3.svg.area ,您應該使用svg:polygond3.svg.lineclosepath命令結合繪製梯形。

下面是如何我做一個簡單的例子:

<!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>