d3 曲线区域填充

最新推荐文章于 2020-02-20 18:07:38 发布
最新推荐文章于 2020-02-20 18:07:38 发布
阅读量877 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chenjy1225/p/11013643.html
版权

本篇以一个简单的demo示范一下在d3中实现曲线的区域填充。

clip-path

clip-path：创建一个只有元素的部分区域可以显示的剪切区域。显示clip-path内部的区域，而外部的区域不可见。

区域填充也主要以clip-path为基础来实现。

区域填充

1.1 先画一条曲线


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="test-svg">
        </div>
    </body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="js/2D.js"></script>
    <script>
        window.onload = function() {
            
            // 数据
            var data = [{
                date: new Date(2019, 3, 24),
                value: 23.24
            }, {
                date: new Date(2019, 3, 25),
                value: 72.15
            }, {
                date: new Date(2019, 3, 26),
                value: 38.84
            }, {
                date: new Date(2019, 3, 27),
                value: 58.62
            }, {
                date: new Date(2019, 3, 30),
                value: 10.80
            }, {
                date: new Date(2019, 4, 1),
                value: 85.47
            }];
            
            var width = 800,
                height = 400,
                padding = {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 40
                };
                
            var colors = d3.schemeSet2;
            var svg = d3.select("#test-svg")
                .append('svg')
                .attr('width', width + 'px')
                .attr('height', height + 'px');
                
            // x轴:时间轴
            var xScale = d3.scaleTime()
                .domain(d3.extent(data, function(d) {
                    return d.date;
                }))
                .range([padding.left, width - padding.right]);
                
            var xAxis = d3.axisBottom()
                .scale(xScale)
                .tickSize(10);
                
            svg.append('g')
                .call(xAxis)
                .attr("transform", "translate(0," + (height - padding.bottom) + ")")
                .selectAll("text")
                .attr("font-size", "10px")
                .attr("dx", "50px");

            var ymax = d3.max(data, function(d) {
                return d.value;
            });

            // y轴
            var yScale = d3.scaleLinear()
                .domain([0, ymax])
                .range([height - padding.bottom, padding.top]);
                
            var yAxis = d3.axisLeft()
                .scale(yScale)
                .ticks(10);
                
            svg.append('g')
                .call(yAxis)
                .attr("transform", "translate(" + padding.left + ",0)");
                
            var curveLine = d3.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(d.value);
                })
                .curve(d3.curveCatmullRom.alpha(0.5));
                
            svg.append("path")
                .datum(data)
                .attr("fill", "none")
                .attr("stroke", "steelblue")
                .attr("stroke-width", 1.5)
                .attr("stroke-linejoin", "round")
                .attr("stroke-linecap", "round")
                .attr("d", curveLine);

                
        }
    </script>

</html>

1487780-20190612235026747-1355400728.png

2.2 添加一条水平的阈值线


// 水平阈值
            svg.append('line')
                .attr('x1', 0)
                .attr('y1', yScale(45))
                .attr('x2', width)
                .attr('y2', yScale(45))
                .attr('stroke', '#FFA354')
                .attr('stroke-width', 1.5)
                .attr('stroke-dasharray', '6,4');

1487780-20190612235230508-1554525238.png

3.3 填充阈值线上面部分



// 添加一个clipPath 
svg.append("clipPath")
                .attr("id", "clip-th")
                .append("rect")
                .attr("x", 0)
                .attr("y", padding.top)
                .attr("width", width)
                .attr("height", yScale(45) - yScale(ymax));

// 再次添加一条曲线并填充区域            
            svg.append("path")
                .datum(data)
                .attr("fill", "steelblue")
                .attr("fill-opacity", 0.5)
                .attr("stroke", "none")
                .attr("d", curveLine)
                .attr('clip-path', "url(#clip-th)");

1487780-20190612235651152-684619750.png

1487780-20190612235707448-1389804085.png

  • path填充的时候会把首尾点连起来，并不是我们想要的效果。所以我们再首尾都添加一个点，来控制填充区域。

4.4 修改数据，重新绘制填充区域


data.unshift({
                date: new Date(2019, 3, 24),
                value: 0
            });
            data.push({
                date: new Date(2019, 4, 1),
                value: 0
            });
            
            svg.append("path")
                .datum(data)
                .attr("fill", "steelblue")
                .attr("fill-opacity", 0.5)
                .attr("stroke", "none")
                .attr("d", curveLine)
                .attr('clip-path', "url(#clip-th)");

1487780-20190613000215480-1713936130.png

  • 目的是达到了但是效果并不是很理想。由于额外的添加了两个点生成的曲线和原曲线产生了偏差。个人觉得比较理想的做法是
    再添加一条红线所示的正常直线path。然后将两个直线和曲线组合起来进行填充。

1487780-20190613000720871-1334358938.png

5.5 再次修改数据，重新绘制


// 红线所示直线数据
var data2 = [{
                date: new Date(2019, 3, 24),
                value: 23.24
            }, {
                date: new Date(2019, 3, 24),
                value: 0
            }, {
                date: new Date(2019, 4, 1),
                value: 0
            }, {
                date: new Date(2019, 4, 1),
                value: 85.47
            }];

// 添加直线生成器
var line = d3.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(d.value);
                });


// 绘制两个path
container.append("path")
                .datum(data)
                .attr("fill", "none")
                .attr("d", curveLine);
                
            container.append("path")
                .datum(data2)
                .attr("fill", "none")
                .attr("d", line);

// 将两个path合并
var combined = "";
            container.selectAll("path")
                .each(function() {
                    combined += d3.select(this).attr("d");
                });
                
            container.selectAll("path").remove();
            
                        // 绘制合并后的path
            container.append("path")
                .attr("stroke", "none")
                .attr("d", combined)
                .attr("fill", "steelblue")
                .attr("fill-opacity", 0.5)
                .attr("fill-rule", "evenodd")
                .attr('clip-path', "url(#clip-th)");

1487780-20190613001120413-258823735.png

  • 我们就能看到完全的区域填充了。切记要使用fill-rule来约定填充的区域。

6.6 添加两条垂直的阈值


// 垂直阈值线
            svg.append('line')
                .attr('x1', xScale(new Date(2019, 3, 26)))
                .attr('y1', yScale(ymax))
                .attr('x2', xScale(new Date(2019, 3, 26)))
                .attr('y2', yScale(0))
                .attr('stroke', '#FFA354')
                .attr('stroke-width', 1.5)
                .attr('stroke-dasharray', '6,4')

            svg.append('line')
                .attr('x1', xScale(new Date(2019, 3, 28)))
                .attr('y1', yScale(ymax))
                .attr('x2', xScale(new Date(2019, 3, 28)))
                .attr('y2', yScale(0))
                .attr('stroke', '#FFA354')
                .attr('stroke-width', 1.5)
                .attr('stroke-dasharray', '6,4')

// clip-path

svg.append("clipPath")
                .attr("id", "clip-th2")
                .append("rect")
                .attr("x", xScale(new Date(2019, 3, 26)))
                .attr("y", yScale(45))
                .attr("width", xScale(new Date(2019, 3, 28)) - xScale(new Date(2019, 3, 26)))
                .attr("height", yScale(0) - yScale(45));

container.append("path")
                .attr("stroke", "none")
                .attr("d", combined)
                .attr("fill", "yellowgreen")
                .attr("fill-opacity", 0.5)
                .attr("fill-rule", "evenodd")
                .attr('clip-path', "url(#clip-th2)");

1487780-20190613001342414-1856794644.png

  • 这下就大功告成了！

转载于:https://www.cnblogs.com/chenjy1225/p/11013643.html

weixin_30846599
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用D3QN求解柔性调度问题是迭代曲线集合
07-20
使用D3QN求解柔性调度问题是迭代曲线集合
d3 svg path添加文本_手把手教你D3.js 实现数据可视化极速上手到Vue应用
weixin_39611754的博客
11-29 704
前言D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:D3与众多其他库的区别在于无限定制的能力(直接操作SVG)。它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。 根据广...
Learning D3.js(5) d3的path讲解
wujingwen1111的专栏
03-11 1万+
转自：http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形，包括矩形，圆形，椭圆，折线，多边形，直线，曲线等。 W3 标准对SVG 的Path定义如下 SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合。 W3提供了一个形象的比喻，用钢笔和纸来表示svg的path *
d3 画曲线
romeo12334的博客
10-23 3264
准备工作创建画布、创建组之类的省略。 准备数据，并用比例尺扩大到整个画布（画布大小自己设置） let data = [1,3,4,5,5] let scale_x = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, this.svgWidth]) let scale_y = d3.scaleLinear() .domain(...
D3js-SVG简单初步
六月心悸
06-09 5419
D3最擅长于生成和操纵SVG图像来进行可视化。绘制div或其它原生HTML元素也是可以的，但是考虑到不同浏览器之间总会存在一些标准上的差异，使用SVG会更可靠更稳定，也会更快一些。 类似于Illustrator的矢量绘图软件可以生成SVG文件，但是我们这里讨论的是如何用代码来生成。 SVG元素 可扩展矢量图形(Scalable Vector Graphics, SVG)是一种基于
D3 二维图表的绘制系列（八）曲线图
zjw_python的博客
02-20 2920
上一篇： 堆叠面积图 https://blog.csdn.net/zjw_python/article/details/98214359 下一篇： 基础饼图 https://blog.csdn.net/zjw_python/article/details/98201470 代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/artic...
D3形状(二)：曲线工厂
甘焕的博客
08-18 4062
给定一系列的点，d3.line除了可以将这些点转换为折线路径外，还可以利用曲线工厂，将这些点转换为各类曲线，并能调节这些曲线的参数，改变曲线的形态。
可视化工具D3教程
热门推荐
Blog | Laulliam
06-27 6万+
可视化工具D3教程第1章 D3简介第2章 第一个程序 Hello World第3章 正式进入D3的世界第4章 选择、插入、删除元素第5章 做一个简单的图表第6章 比例尺的使用第7章 坐标轴第8章 完整的柱形图第9章 让图表动起来第10章 理解 update()、enter()、exit()第11章 交互式操作第12章 布局第13章 饼状图第14章 力导向图第15章 树状图第16章 地图可视化学习D......
怎样一步步用D3画多曲线
diandingyin9417的博客
07-07 340
Bar Chart:http://bl.ocks.org/mbostock/3885304 这是一个画柱状图的基本形式。 Axis是数轴； tickets是数轴上的标尺。tickets第二个參数% 能够使[0, 1]的数以百分比显示； rangeRoundBands 在[0, width] 上按区间划分。正好适合柱状图，rangePoints 在[0, width] 上...
D3.js学习（五）
weixin_30266885的博客
10-17 56
上一节我们已经学习了如何设置填充区域，其实理解了他的实现原理还是非常简单了。这一节中， 我们主要学习多条曲线的绘制，以及给不同的曲线指定不同的纵坐标。 新的数据 由于我们要画两条曲线，所以我们要在原来的基础上新增一组测试数据，现在我们的数据是这样的： date close open 1-May-12 58.13 3.41 30-Apr-1...
d3-interpolate-curve:D3内插曲线
05-14
d3内插曲线 该模块提供了一些从D3曲线函数生成数值插值器的方法。 D3具有函数，例如d3.interpolateBasis（），用于使用基础插值算法将一系列数字插值到曲线中。 D3还具有功能，例如d3.curveCardinal（）和d3.curveMonotoneX（），可用于快速生成SVG曲线路径。 但是，D3中目前不存在诸如d3.interpolateCardinal（）和d3.interpolateMonotoneX（）之类的插值函数，这限制了我们只能为SVG生成Cardinal和MonotoneX曲线，而不能为X3D生成此类曲线。 编写了插件来填补这一空白，以提供缺少的插值函数，例如d3.interpolateCardinal（）和d3.interpolateMonotoneX（）以及d3.interpolateFromCurve（）。 正在安装 如果使用NPM，则np
使用D3.js库绘制曲线图
04-11
【无需积分】 D3.js可视化库可以绘制曲线图。资源中xml文件包含了所有数据点，js文件调用D3库绘图，html文件展示绘图结果，css文件改变绘图样式。可以使用IE浏览器打开。
d3-morton-order:D3布局，使用连续的莫顿（Z阶）空间填充曲线可视化距离变量
05-05
d3-莫顿 D3布局使用连续的莫顿（Z阶）空间填充曲线可视化距离变量。 这是一个。 另请参阅 。快速开始import d3ZOrder from 'd3-morton';或者d3.zOrder = require('d3-morton');甚至[removed][removed]然后const ...
d3d11renderers.rar
07-31
https://blog.csdn.net/zlyadvocate/article/details/118669454配套代码
d3-horizon:地平线区域图D3组件
05-05
d3.horizo​​n 一个基于D3的组件，呈现。 的在很大程度上基于以前的工作，已扩展为支持HTML5 Canvas渲染，并已迁移以实现D3 v4+兼容性。 查看示例： （） （）快速开始import d3 from 'd3-horizon';或者d3.horizon ...
d3-hilbert：D3布局，使用连续的Hilbert空间填充曲线可视化距离变量
02-05
d3-希尔伯特 D3布局使用连续的Hilbert空间填充曲线可视化距离变量。 这是一个。 另请参阅 。快速开始import d3Hilbert from 'd3-hilbert';要么d3.hilbert = require('d3-hilbert');甚至[removed][removed]然后const ...
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
d3js流程图代码
04-09
使用d3js开发的js流程图，功能完善，支持事件操作，缩小，放大，平移，选中，保存流程图数据，动态加载流程图数据等功能
易语言D3DHook
08-21
易语言D3DHook源码系统结构:初始化设备,初始化顶点缓冲,渲染,转,配置矩阵,hook,NewDirect3DCreate9,NewCreateDevice,NewPresent,安装ApiHook,开始Hook,停止Hook,卸载ApiHook,取Hook信息,Jmp,取指针内容_整数,G
d3.js在vue里画贝塞尔曲线实例
最新发布
06-01
下面是一个使用d3.js在Vue中画贝塞尔曲线的示例： 1. 安装d3.js 使用npm安装d3.js: ``` npm install d3 ``` 2. 在Vue组件中导入d3.js 在Vue组件的`<script>`标签中导入d3.js： ``` import * as d3 from 'd3'; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值