如何在d3.js中使用面积绘制正方形?有可能做到这一点吗?
我的代码:
var data = [
{x: 0, y: 0},
{x: 5, y: 0},
{x: 0, y: 5},
{x: 5, y: 5},
];
var xScale = d3.scaleLinear().domain([0, 6]).range([25, 175]);
var yScale = d3.scaleLinear().domain([0,20]).range([175, 25]);
var area = d3.area()
.x(d => xScale(d.x))
.y0(yScale(0))
.y1(d => yScale(d.y));
d3.select("#demo1")
.append("path")
.attr("d", area(data))
.attr("fill", "red")
.attr("stroke", "black");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg id="demo1" width="200" height="200"></svg>
此代码的结果:
感谢您的帮助!
1条答案
按热度按时间dtcbnfnu1#
您可以使用
d3.area()
和以下点创建一个正方形:第一个
对于your image中的形状,请尝试以下几点:
第一个