D3 line

最新推荐文章于 2024-09-02 09:48:51 发布

Claroja

最新推荐文章于 2024-09-02 09:48:51 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/claroja/article/details/106544736

版权

js 专栏收录该内容

114 篇文章

订阅专栏

绘制线段
1.最原始的做法

<line x1="10",y1="10",x2="20",y2="20">

svg.append('line')
	.attr('x1',10)
	.attr('y1',10)
	.attr('x2',20)
	.attr('y2',20)

2.使用path

<path d="M20,20L300,100">

svg.append('path')
	.attr('d',"M20,20L300,100")

3.使用d3的线段生成器

        svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)
        var lines = [[10,10],[20,20],[10,30],[20,40]]
        var linePath = d3.svg.line()
        svg.append('path')
            .attr('d',linePath(lines))
            .attr('stroke','black')
            .attr('stroke-width','3px')
            .attr('fill','none')

定义两点之间的差值方式
line.curve - set the curve interpolator.

https://github.com/d3/d3/blob/master/API.md#lines
d3.line - create a new line generator.
line - generate a line for the given dataset.
line.x - set the x accessor.
line.y - set the y accessor.
line.defined - set the defined accessor.
line.curve - set the curve interpolator.
line.context - set the rendering context.
d3.lineRadial - create a new radial line generator.
lineRadial - generate a line for the given dataset.
lineRadial.angle - set the angle accessor.
lineRadial.radius - set the radius accessor.
lineRadial.defined - set the defined accessor.
lineRadial.curve - set the curve interpolator.
lineRadial.context - set the rendering context.