d3 渲染path为直线时，渐变色无法适用

最新推荐文章于 2023-09-03 16:43:20 发布
最新推荐文章于 2023-09-03 16:43:20 发布
阅读量514 收藏 1
点赞数 1
分类专栏： JS Css 文章标签： d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43170484/article/details/105262388
版权
JS 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
Css
7 篇文章 0 订阅
订阅专栏

在这里插入图片描述

<path class="link" d="M15,15.345833333333333C279,15.345833333333333 279,15.345833333333333 543,15.345833333333333" style="stroke-width: 30.6917; opacity: 0.15; stroke: url(&quot;#gradient26&quot;);"></path>

类似于这种渲染成直线的path，适用渐变色时会发现整条线消失了，解决方法如下：

<linearGradient id="gradient41" gradientUnits="userSpaceOnUse"><stop offset="10%" stop-color="#AA974E"></stop><stop offset="90%" stop-color="#AA974E"></stop></linearGradient>

在linearGradient标签上添加gradientUnits="userSpaceOnUse"属性即可解决

RicardoMANUTD
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
D3D11直接渲染YUV
07-27
采取三纹理方式使D3D可以直接渲染YUV数据
html5+d3 svg 线条、图形颜色渐变动画
tuoxinquyu的专栏
01-05 8419
代码如下：<!doctype html> <html> <head> <meta charset="utf-8"> <title>线条、图形颜色渐变动画</title> <script src="js/jquery.min.js"></script> <script src="js/d3.js"></script> <script> $(document).ready(function(){
使用 D3.js 创建根据值域颜色渐变的地图
法研鲁迅的个人博客
03-07 2880
使用 D3.js 创建根据值域颜色渐变的地图
HTML5标签绘制渐变图形的一些总结
妈的小可爱
05-16 637
代码如下： practice function createArcile(id) { var canvas = document.getElementById(id); var ctx = canvas.getContext("2d"); //ctx.fillStyle =
vue-baidu-map的区域圈线和路径的渐变色
weixin_44563526的博客
02-03 1367
百度地图的折线，加箭头跟渐变色。数据是根据后台来切换的。一定要记得获取数据的延迟性。
arcgis js+d3实现线要素的颜色按路径方向渐变
weixin_41138247的博客
04-09 2410
刚开始拿到的需求是做一个管网压力的分析，要在地图上以渐变色的形式显示。这可令我头疼不已，都知道arcgis js api万恶的封闭性，new color肯定没法做成渐变效果，思来想去只能用svg来实现。 实现这个效果有两个思路，一个是使用arcgis js封装的featureLayer来加载svg，给地图加上一个图层；另一种方法直接抛开图层不谈，在底层加载svg。这里我使用了第二种方法，这种方法...
d3 - 力引导图(二) 为节点设置多种唯一颜色方案
Charonmomo的博客
12-22 3123
v3版本: var color = d3.scale.category10(); ... return color[i]; v4/v5版本: d3.schemeCategory10 d3.schemeCategory20 d3.schemeCategory20b d3.schemeCategory20c 注意: v5版本只有 d3.schemeCategory10 可用, 其他几个已经被 d3-scale-chromatic 取代了, 在v5版本中使用后面几个都会报错! // 颜色比例尺 var co
D3.js 实现线的渐变
weixin_34211761的博客
08-04 1659
2019独角兽企业重金招聘Python工程师标准>>> ...
d3.js角度渐变动画（弧度渐变）
X01动力装甲的专栏
04-02 1991
d3.js角度渐变动画（弧度渐变） 众所周知的原因SVG、Canvas里面都没有角度渐变的API。所以如果要制作一个颜色随着弧度变化而变化的环形，还是挺麻烦的一件事。如果再加上增长减少动画那就更加麻烦了。 如下图所示我们要制作的动画效果，圆环的透明度随着角度的增加而增加。角度为0的时候透明度为0，角度结束的时候透明度为1。注意透明度为1的地方不固定，它随着百分比的变化而变化。 d3实现角度渐变的...
渐变色Highcharts
10-25
带例子，将原来单色变为渐变色，运行电脑时间，不超过2015年1月
windows mft d3d11渲染显示 播放器
06-07
windows mft d3d11渲染显示 播放器 键盘D删除播放器 键盘P 重新创建和播放视频
Qt使用SDL2\D3D渲染YUV420p
01-09
Qt使用SDL2\D3D渲染YUV420p
C# wpf 使用d3d渲染yuv视频数据
11-12
在wpf中可以使用hwnd渲染视频，但是有一个缺点，和wpf的控件不太契合，无法在播放框放控件，也无法改变形状，导致一些界面需求较难实现。为了解决这一问题，找到了一种可以和wpf绘制兼容的视频渲染方式，使用d3d渲染...
d3(v5) 使用比例尺做渐变色
romeo12334的博客
10-23 3779
比例尺 把0到100的数字归一化到0-1区间： let linear = d3.scaleLinear().domain([0, 100]).range([0, 1]) 制作颜色计算器： let red = '# let compute = d3.interpolate('red', 'blue') 画100个小矩形，渐变色。 d3.selectAll('rect').data(d3.rang...
svg path 设置fill的渐变色
u012632105的博客
09-03 1384
表示从 70% 的位置开始变成透明。属性规定了渐变颜色的位置，例如。标签定义了渐变的颜色和位置。定义了一个线性渐变，
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.js学习笔记-05(颜色、路径生成器)
qq_40625543的博客
09-08 951
d3.js学习笔记-05 目录d3.js学习笔记-051. 颜色1.1 RGB1.2 HSL1.3 颜色插值2. 线段生成器2.1 生成线段方式汇总2.2 线段生成器3 区域生成器4 弧生成器5 符号生成器6 弦生成器7 对角线生成器References 1. 颜色 1.1 RGB RGB色彩模式通过叠加红绿蓝三个颜色通道得到各种颜色 d3.rgb(r,g,b)：使用r、g、b值来创建颜色，范围都为[0,255]。 d3.rgb(color)：输入字符串来创建颜色，例如："#ffeeaa“或缩写"#fe
【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
weixin_30340745的博客
05-09 775
颜色插值指的是给出两个 RGB 颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器，只需给出两端的颜色值即可。1. 颜色插值在【高级 - 第 5.0 章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compu...
使用webpack时发生Cannot read property 'tap' of undefined
weixin_43170484的博客
01-10 4900
webpack设置后出现报错信息 使用webpack的插件时要注意不要放错位置，create-react-app生成的项目目录使用eject解压缩之后的webpack设置中会有包含在resolve中的plugins，在使用类似webpack.DllReferencePlugin这种插件时要注意放在正确的位置，否则会在运行时出现’tap’未定义的问题 ...
d3.js svg path
最新发布
01-06
其中，svg的path标签在d3.js中被称为"可以组成任何形状的形状"。d3.js提供了多种path生成器，可以用来创建不同类型的路径。 以下是一些常用的d3.js svg path生成器： 1. d3.svg.line() - 线path生成器 2. d3.svg....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值