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

最新推荐文章于 2024-04-04 00:42:41 发布
最新推荐文章于 2024-04-04 00:42:41 发布
阅读量1k 收藏 6
点赞数
分类专栏： 数据分析与可视化 web 编程基础 文章标签： 森林 数据分析 数据挖掘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuohenYJ/article/details/121592119
版权

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创建

参考

落痕的寒假
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3-circle-text:一个用于将文本置于圆心的插件
05-25
d3圆文字 这是一个小插件，用于沿圆圈底部书写文本。 这主要是想与，这是一种将标签非干扰性地放置在中间节点上的方法。 例子 用法 该插件遵循的使用模式与D3随附的插件相同。 要使用circleText ，您必须创建并配置以下对象： var circleText = d3 . circleText ( ) ; . radius ( function ( d ) { return d . r - 5 ; } ) . value ( function ( d ) { return d . name ; } ) . method ( 'align' ) . spacing ( 'exact' ) . fontSize ( '100%' ) ; 然后，您可以在已加入数据的g元素上调用它。 该调用返回添加的text元
python数据分析与可视化-北京市落户人口数据可视化.zip
最新发布
04-26
python数据分析与可视化—北京市落户人口数据可视化.zippython数据分析与可视化—北京市落户人口数据可视化.zippython数据分析与可视化—北京市落户人口数据可视化.zippython数据分析与可视化—北京市落户人口数据...
d3根据数据绘制不同的形状
weixin_33889245的博客
11-02 483
绘制力导向图的时候通常节点都是圆形，但也会遇到公司节点绘制成圆型，人绘制成方形的情况，那我们怎么依据数据绘制不同的形状。 你可能首先会想到，这很简单啊，是公司的时候append circle,是人的时候append rect。但是append并没有提供回调也就是说我们不能这样做。 node.append((data)=>{ return data.type ===...
D3JS 点击按钮生成圆点，并实现属性的动态修改
Turn_to_empty的博客
04-04 500
D3JS 点击按钮生成圆点，并实现属性的动态修改
【实例】在html中用d3.绘制一个 简单的圆
神创的博客
02-26 2590
&lt;html&gt; &lt;body&gt; &lt;script src ="http://d3js.org/d3.v3.min.js" charset="utf-8" &gt;&lt;/script&gt; &lt;script&gt; var width = 400; var he
二。D3.js 绘制一个简单的图形--圆形
姜兴的专栏
07-18 871
<html> <head> <metacharset="utf-8"> <title>D3第一个圆形</title> <scriptsrc="http://d3js.org/d3.v3.min.js"charset="utf-8"></script> </head> <body> </body> <script> ...
d3.js介绍以及使用d3.js画一个圆圈和柱状图附带讲解d3.js的enter对象、update对象、exit对象
xiaozhuangyumaotao的博客
05-30 1558
d3.js官网https://d3js.org/。全称为“data-driven Documents”,3个d嘛，简称d3.js。使用的话，官网上面有下载连接，就是一个zip压缩包。解压后把里面的d3.js引入就可以使用了，它并需要使用npm来安装，就是一个普通的js文件罢了，就像我们使用jquery，下载下来引入就可以使用了，方法是一样的。 d3.js是干嘛的呢？ 大家有用过类似的图表展现工具吧，比如百度的echarts，国外的highcharts之类的，d3.js跟...
短视频流量数据分析与可视化管理系统-基于Web的短视频流量数据分析与可视化系统设计与实现-短视频流量数据分析与可视化管理系统ja
02-28
基于springboot的短视频流量数据分析与可视化系统-基于Web的短视频流量数据分析与可视化系统设计与实现-短视频流量数据分析与可视化网站-短视频流量数据分析与可视化网站代码-短视频流量数据分析与可视化平台-短视频...
数据可视化-使用SVG和D3可视化浏览指标
03-02
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交...
Python数据分析与可视化-电子教案.pdf
06-12
《Python 数据分析与可视化》课程教案（首页） 学院： 计算机系/学院 课程/项目 名称 数据分析与可视化 课程 总学时：60 学时 理论：36 学时 实验：24 学时 学分 3 课程 课程类别：专业必修 专业必修 公共必修 公共...
Excel数据分析与可视化-教学进度表.docx
02-20
通过本课程的学习，学生将掌握使用 Excel 进行数据分析和可视化的能力，并能够将分析的结果整合成报告，为日后在实践中应用 Excel 的基础。 教学方法及手段 本课程将采用理论与实践相结合的教学方法。在理论上，...
D3人脉关系网+圆形头像
06-26
D3历学图,实现的效果是 根据关系网显示人脉图,(名称,头像,关系)
html 画圆点代码,html – 使用D3绘制圆圈
weixin_29164843的博客
05-30 634
以下代码用于绘制彼此相邻的五个圆圈var dataset = [],i = 0;for(i=0; i<5; i++){dataset.push(Math.round(Math.random()*100));}var sampleSVG = d3.select("#viz").append("svg").attr("width", 400).attr("height", 400);sample...
数据可视化 d3操作汇总（二）：圆弧、饼图、环图、玫瑰图绘制
Studying Blog by Bryce Gu
06-04 4098
一、圆环绘制 圆环绘制必须要先有一个弧生成器，例如： var dataset = { startAngle: 0 , endAngle: Math.PI * 0.75 }; //创建一个弧生成器 在此基础上zai'li'yon
【D3.js】2.2-给 Circle 元素添加属性
qiebzps的博客
12-02 753
【D3.js】2.2-给 Circle 元素添加属性上章节中虽然添加了circle，但是因为缺少某些属性设置而显得不可见，在此章节中将学习circle的cx、cy、r属性。
arcgis js 4 使用d3.js 构建缩放圆
haibalai2009的博客
01-25 294
我们使用d3.js 与arcgis 构建缩放圆 首先还是先定义数据结构 let options = { renderer: { type: “simple”, symbol: { r: 10, //圆半径 color: “#0cff04”, //圆颜色 time1: 800, //放大速度 time2: 800, //缩小速度 r1: 30, //放大的尺寸 r2: 10, //缩小的尺寸 ease1: “easeElasticOut”, ease2: “easePoly” } }, data: [ { g
由浅入深的 D3.js 初级及进阶指南之二 了解SVG 中的基础图形(rect , line ,circle 等)及在 D3.js 中的应用
法研鲁迅的个人博客
04-26 821
svg 中基础的图形单元的创建,包括 rect 、 line 、 circle 等常见的.
d3 实现 hover 展示双层圆环
Dreamy_LIN的博客
03-13 291
业务上对 d3 的一次简单样式更改，这里记录下，整个思路过程
d3js学习——7.绘制图形
weixin_44535441的博客
07-14 374
条形图 使用d3js绘制条形图的步骤： 1.条形图的样式 svg rect { fill: gray; } svg text { fill: yellow; font: 12px sans-serif; /* 将文本定位到条的右端 */ text-anchor: end; } 2.设置变量值 const data = [10, 20, 23, 14]; //定义 svg的宽度、缩放到屏幕上可见的像素值、水平条的静态高度 const width = 500, scaleF
r数据分析与可视化从入门到精通
12-14
r数据分析与可视化是一门强大的工具，它可以让我们更好地理解数据并从中发现有用的信息。从入门到精通，这个过程需要我们掌握一系列的知识和技能。 首先，我们需要学习r语言的基础知识，包括数据类型、变量、逻辑运算、循环和函数等。了解这些内容可以让我们更好地理解和处理数据。 其次，我们需要学习如何在r语言中进行数据分析。这包括数据清洗、数据转换、统计分析和预测建模等内容。通过这些技能，我们可以对数据进行深入的分析和挖掘。 另外，我们还需要学习如何在r语言中进行数据可视化。这包括使用ggplot2包进行静态可视化，以及使用plotly包进行交互式可视化。通过这些技能，我们可以将复杂的数据转化为直观的图形，更好地传达数据的信息。 最后，要成为r数据分析与可视化的专家，我们还需要不断实践和积累经验。通过不断地应用所学的知识和技能，我们可以不断提升自己的水平，最终成为专业的数据分析与可视化专家。 总的来说，r数据分析与可视化从入门到精通需要我们学习r语言的基础知识，掌握数据分析和可视化技能，并不断实践和积累经验。随着不断地学习和提升，我们可以逐渐成为专业的数据分析与可视化专家。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值