[数据与分析可视化] D3入门教程2-在d3中构建形状

d3.js入门教程2-在 d3.js中构建形状

文章目录

• d3.js入门教程2-在 d3.js中构建形状
• 形状的添加
• • 圆形的添加
  • 矩形的添加
  • 线段的添加
  • 文本的添加
  • 折线的添加
  • 区域的添加
  • 圆弧的添加
• 参考

d3.js是一个用于绘图的JavaScript 库。 它可以可视化展示任何类型的数据。 d3.js允许绘制形状，然后将各种形状构建一个图形。本文档描述了一些函数，可以更有效地从数据中绘制svg。

形状的添加

圆形的添加

在svg中绘制圆形。需要三个参数：分别代表圆心x位置的cx、圆心y位置的cy和半径的r。基础调用函数如下：

<circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>

现在，让我们用javascript来实现它，这基本上是相同的过程。

    <!-- 直接绘图 -->
    <svg>
        <circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="circle"></svg>
    <script>
        // 创建svg元素
        var svg = d3.select("#circle").append("svg").attr("width", 200).attr("height", 200)

        // 设置属性
        // stroke设置轮廓颜色
        svg.append('circle').attr('cx', 100).attr('cy', 100).attr('r', 30).attr('stroke', 'black').attr('fill', 'red')
    </script>

其中蓝色圆是由html绘图元素创建，红色圆是通过js创建

矩形的添加

在svg中绘制矩形，四个参数是必需的：x，y，width和height。

<rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>

现在，让我们用javascript来实现它，这基本上是相同的过程。

    <!-- 直接绘图 -->
    <svg>
        <rect style="fill: #69b3a2" stroke="black" x=10 y=100, width=300 height=40></rect>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="rect"></svg>

    <script>
        // 创建svg元素
        var svg = d3.select("#rect").append("svg").attr("width", 800).attr("height", 200)

        // 设置属性
        svg.append('rect')
            .attr('x', 10)
            .attr('y', 120)
            .attr('width', 600)
            .attr('height', 40)
            .attr('stroke', 'black')
            .attr('fill', 'red');

其中蓝色矩形是由html绘图元素创建，红色矩形是通过js创建

线段的添加

在svg中绘制线段，四个参数是必需的：x0，y0，x1和y1（线段的两个顶点坐标）。

<line stroke="#69b3a2" x0=10 y0=10, x1=500 y1=100></line>

现在，让我们用javascript来实现它，这基本上是相同的过程。

    <!-- 直接绘图 -->
    <svg>
        <line stroke="#69b3a2" x0=10 y0=10, x1=300 y1=100></line>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="segment"></svg>

    <script>

        // 创建svg元素
        var svg = d3.select("#segment").append("svg").attr("width", 800).attr("height", 200)

        // 设置属性
        svg.append('line')
            .attr('x1', 10)
            .attr('y1', 10)
            .attr('x2', 700)
            .attr('y2', 100)
            .attr('stroke', 'red')
    </script>

其中蓝色线段是由html绘图元素创建，红色线段是通过js创建

文本的添加

在svg中添加文本，需要三个参数：x,y和text。

<text stroke="#69b3a2" style="font-size: 19px" x=100 y=50>I'm a piece of text</text>

现在，让我们用javascript来实现它，这基本上是相同的过程。

    <!-- 直接绘图 -->
    <svg>
        <text stroke="#69b3a2" style="font-size: 19px" x=100 y=80>I'm a piece of text</text>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="text"></svg>

    <script>

        // 创建svg元素
        var svg = d3.select("#text").append("svg").attr("width", 800).attr("height", 200)

        //设置属性
        svg.append('text')
            .attr('x', 60)
            .attr('y', 50)
            .attr('stroke', 'red')
            .style("font-size", 19)
            .text("I'm another piece of text")
    </script>

其中蓝色文本是由html绘图元素创建，红色文本是通过js创建

折线的添加

在svg添加文本，参数比较复杂。具体如下：

<path style="fill: none" stroke="black" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>

幸运的是，d3.js提供可以更有效地绘制折线的函数

    <!-- 直接绘图 -->
    <svg height=200 width=600>
        <path style="fill: none" stroke="#69b3a2" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="line" height=200 width=600></svg>

    <script>

        // 创建svg元素
        var svg = d3.select("#line").append("svg")

        // 创建数据，多个点连接成折线
        var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 创建连接函数
        var lineFunc = d3.line()
            .x(function (d) { return d.x })
            .y(function (d) { return d.y })

        // 添加元素
        svg.append('path')
            .attr('d', lineFunc(data))
            .attr('stroke', 'red')
            .attr('fill', 'none');
    </script>

其中蓝色线条是由html绘图元素创建，红色线条是通过js创建

当然可以设置线条类型，如下所示

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="curve" height=300 width=600></svg>

    <script>

        // 创建数据
        var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 创建svg元素
        var svg = d3.select("#curve").append("svg").attr("width", 1800).attr("height", 200)

        // 创建辅助函数
        var curveFunc = d3.line()
            // 设置线条类型，具体设置参考官方文档，可以尝试curveStep.
            .curve(d3.curveBasis)
            .x(function (d) { return d.x })
            .y(function (d) { return d.y })

        svg.append('path')
            .attr('d', curveFunc(data))
            .attr('stroke', 'black')
            .attr('fill', 'none');

    </script>

区域的添加

html的svg标签原生语法画区域很麻烦，还是用js容易。原生代码如下所示：

<path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>

js代码如下：

    <!-- 原生绘图 -->
    <svg height=300 width=800>
        <path style="fill: #69b3a2" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="area" height=300 width=800></svg>

    <script>

        // 创建数据
        var data = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

        // 创建svg元素
        var svg = d3.select("#area").append("svg")

        // 创建辅助函数
        var curveFunc = d3.area()
            .x(function (d) { return d.x })
            .y1(function (d) { return d.y })     // 区域上边界坐标
            .y0(200)                             // 区域下边界坐标

        // 添加属性
        svg.append('path')
            .attr('d', curveFunc(data))
            .attr('stroke', 'black')
            .attr('fill', 'red');

    </script>

圆弧的添加

圆弧的添加也是一样，js最好。原生代码如下：

<path style="fill: #69b3a2" stroke="black" transform="translate(400,200)" d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>

现在，让我们使用d3.arc()辅助函数来绘制相同类型的形状。我们需要提供4个参数：innerRadius、outerRadius、startAngle、endAngle

    <!-- 原生绘图 -->
    <svg height=400 width=400>
        <path style="fill: #69b3a2" stroke="black" transform="translate(400,200)"
            d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z"></path>
    </svg>

    <!-- 加载d3 -->
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- 添加一个空的svg图片 -->
    <svg id="arc" height=400 width=400></svg>

    <script>
        // 创建svg元素
        var svg = d3.select("#arc").append("svg")
        // 添加弧形
        svg
            .append("path")
            .attr("transform", "translate(400,100)") // 平移距离
            .attr("d", d3.arc()
                .innerRadius(100) // 内圈半径
                .outerRadius(150) // 外圈半径
                .startAngle(3.14)     // 开始角度（弧度），最下方为3.14
                .endAngle(3.14 * 1.6)       // 结束角度（弧度）
            )
            .attr('stroke', 'black')
            .attr('fill', 'red');
    </script>

其中蓝色圆弧是由html绘图元素创建，红色圆弧是通过js创建

参考

• Building shapes in d3.js