- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 VueJS 和 SVG 从头开始实现 Sankey 图,我现在面临着关闭从节点到节点的两条平行二次贝塞尔曲线路径的困难。
例如,通过额外的计算,我获得了以下路径
path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"
path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"
路径是这样组合的,以为行,结果不行
<g>
<template v-for="(point,index) in sankeyNode">
<template v-for="(pnode, idex) in Object.entries(point)">
<template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
<g style="stroke-width:1;" stroke="black" fill="pink" :stroke-opacity="0.3">
<path :d="paths[0]+' '+paths[1]+' Z'" />
</g>
</template>
</template>
</template>
</g>
这两条路径彼此平行,但我想让它们成为一条靠近的路径,这样我就可以填充组合路径,看起来如下图所示
目前,当路径合并时,它看起来是这样的
我已经尝试使用下面的图片进行说明
现在,当我到达 Path2 末端的“Point A”时,我尝试将 Vertical lineto 添加到“Point B”,这样我就可以从“Point B”形成到“Point E”的二次贝塞尔曲线,并且关闭 CABE 的路径,并通过添加从“点 C 到 E”的垂直线对 Path1 执行相同的操作,然后从点 E 到点 F 形成二次贝塞尔曲线并关闭 GCEF 的路径。
我的尝试没有成功,我正在重新阅读 SVG 文档以找到解决此问题的线索..
请我需要有人给我提供有关如何解决此问题的线索。谢谢
最佳答案
因为两条路径都是从左边开始的,所以我不得不反转第二条路径,让它从右边开始。接下来,我加入了路径的 2d 属性,并将第二条路径的 M 命令替换为 L(行)。我还通过在末尾添加 z 命令来关闭路径。我希望这就是您所需要的。
<svg viewBox="0 0 400 200">
<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994
L360.07142857142856,171.66646326824585Q197.53571428571428,107.65044814340591 35,107.65044814340591
z"/>
</svg>
关于javascript - 如何关闭两条平行二次贝塞尔曲线的路径,其中每条曲线都以 MoveTo 标签开头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59609470/
2种参数:尺寸和价格。目前,我只能单击选择/突出显示尺寸列中的一个,也只能单击选择/突出显示价格列中的一个,而不会影响另一个列中的一个。 当我点击尺寸时,会添加一个 URL 参数“#size=4”。单
在css命名约定中,有什么原因,一些object最好以前缀o-和component开头> 以 c- 开头? 我知道 o- 代表 object 而 c- 代表 component,但为什么不呢?难道我们
这就很迷惑了,一下子,下面的代码就不行了。尝试让我的 Android 很好地显示网页已经显示的内容: HttpClient httpclient = new DefaultHttpClient();
我正在将我的网站发布到我无法控制的 IIS 服务器,我想从代码隐藏中了解它的 URL 是否以“http”或“https”开头。 首先,我在本地尝试了这两种解决方案,都返回了正确的值(“http”):
如果我运行: sbin/start-dfs.sh 然后它实际上并没有启动一个名称节点尽管打印: Starting namenodes on [0.0.0.0] 0.0.0.0: starting na
我正在开发一个包含一些数组的模块。现在我的数组包含: $omearray = array ( '#title' = 'title', 0 = array ( 'another array',
对于 PMD,我希望有一个规则来警告我那些以 my 开头的丑陋变量。 这意味着我必须接受所有不以my开头的变量。 所以,我需要一个正则表达式(re),其行为如下: re.match('myVar')
出于某种奇怪的原因,当我尝试使用 URLConnection 获取网页源时,我在输出中得到“null”。有人可以解释一下吗? 我的方法: public String getPageSource()
如何批量检查某个字符串(记录文本文件中的行)是否以特定单词开头? 我知道如何检查句子/行(字符串)中是否存在单词(子字符串),但我如何检查天气是否以这个词开头? 谢谢:) 最佳答案 这可以通过 FIN
我有一个列表,其中包含多个网址和一些字符串,例如#skipsideNav、#content。我正在从这些字符串中分离出 url if link.startswith('/'): local_u
我有以下 html 标记: 我想选择类 bubble bubble_white 和 bubble bubble_black。我正在考虑下面的代码,但它不起作用: $(".bubbl
我有一个用于文件名验证的正则表达式。在这里: /^[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_; ]+$/ 如何更改它以检查文件名不是以
我正在构建一个自动填充函数,它接受一个字符串输入并返回一个字符串建议列表。 Sequelize 的 iLike:query返回出现查询字符串的每个字符串。我想支持查询是前缀的字符串。例如当query=
我首先知道这可能是有史以来看起来最糟糕的正则表达式,但这里是。 我有这个正则表达式 (?:http://)?(?:www.)?youtu(?:be)?.(?:[a-z]){2,3}(?:[a-z/?=
尝试读取文件并根据行创建字典,跳过以#符号开头的行 文件示例: param1=val1 # here is comment 我的功能: def readFromFile(name): conf
我的程序正在读取文本文件并根据文本执行操作。但是文本的第一行是有问题的。显然它以“”开头。这弄乱了我的 startsWith() 检查。 为了理解这个问题,我使用了这段代码: System.ou
我的印象是变量名只能以字母和 _ 开头,但是在测试时,我还发现变量名可以以 $ 开头,如下所示: 代码 #include int main() { int myvar=13; int
我试过这个... Dim myMatches As String() = System.Text.RegularExpressions.Regex.Split(postRow.Item("Post")
开头
我正在使用CKEditor,默认情况下在内容的开头添加了。 即使将enterMode设置为,它也只会影响Enter键的作用,并保留开始的。 我遇到的问题是,如果文本以标记开头,它将围绕它包装,并且图像
我有一个List ,其中有五个字符串: abc def ghi jkl mno 我还有另一个字符串“pq”,我需要知道列表中的每个字符串是否都不以“pq”开头-我将如何使用LINQ(.NET 4.0)
我是一名优秀的程序员,十分优秀!