d3 path

最新推荐文章于 2024-06-07 09:47:56 发布

一叶知秋9307

最新推荐文章于 2024-06-07 09:47:56 发布

阅读量945

点赞数

分类专栏： d3 D3入门文章标签： d3.js

本文链接：https://blog.csdn.net/qq_40285497/article/details/84894756

版权

d3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

D3入门

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="">
</head>
<body>
<svg width="600" height="500"></svg>

<script src="../d3.js"></script>
<script>
    var lines = [[80,80],[200,100],[200,200],[100,200]];
    var linePath = d3.line()
        .x(function (value) {
            return value[0]*2
        })
        .y(function (value) {
            return value[1]*2
        });

    //下面这些生成不同的线
    // console.log(linePath.curve(d3.curveBasis))
    // console.log(linePath.curve(d3.curveLinear))
    // console.log(linePath.curve(d3.curveStep))
    // console.log(linePath.curve(d3.curveLinearClosed))
    // console.log(linePath.curve(d3.curveBundle))
    // console.log(linePath.curve(d3.curveCardinal))
    // console.log(linePath.curve(d3.curveMonotoneX))
    // console.log(linePath.curve(d3.curveMonotoneY))

    //选择数据
    // linePath.defined(function (value) {
    //     return value[0]>90;
    // });

    var svg = d3.select('svg');
    svg.append('path')
        .attr('d',linePath(lines))
        .attr('stroke','#000')
        .attr('stroke-width',1)
        .attr('fill','none')
</script>
</body>
</html>

一叶知秋9307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3 path

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=""></head><body>&l...
复制链接

扫一扫

专栏目录