javascript - 在 D3 中选择正确的插值以在路径(区域)内居中路径(线)
问题描述
举例来说,考虑以下 D3 代码(仅相关部分,完整的 - 但只有不到十几行的代码在JSFiddle上),它在带内画了一条线。
var points = [
[200, 100],
[200, 200],
[100, 300],
[100, 400]
];
var areaGenerator=d3.area()
.curve(d3.curveMonotoneY)
.x0(function(d){return d[0]-20})
.x1(function(d){return d[0]+20})
.y0(function(d,i){return d[1]})
.y1(function(d,i){return d[1]})
;
var area = areaGenerator(points);
svg.append('path')
.attr('d', area);
svg.append("path")
.data([points])
.attr("d", d3.line()
.curve(d3.curveCardinal
.tension(0.8)))
.attr("id","line")
这是生成的 svg 对象的图像:
我已经尝试了几个值,.tension()
但我无法找到正确的插值函数来使线在整个流程中位于(大约)带的中间,受到第一个和最后一个部分的约束线和带都应该完全垂直,它们不能向左或向右“放大”。
这就是我想要获得的,大约:
解决方案
我最初的答案没有经过深思熟虑。您可以简单地将相同的曲线属性应用于黑色路径,就像对红色路径一样:https ://jsfiddle.net/s5o4hp3z/
只需将黑色路径更改为:
svg.append("path")
.data([points])
.attr("d", d3.line().curve(d3.curveMonotoneY))
.attr("id","line")
--------原始答案--------
您可以使用类似于用于红色区域的区域生成器,但具有宽度属性使其看起来像一条线。
我已经修改了你的 JSFiddle 来展示这个:https ://jsfiddle.net/6e03o42f/3/
我所做的是将路径创建更改为:
var lineAreaGenerator = d3.area()
.curve(d3.curveMonotoneY)
.x0(function(d){return d[0]-0.5})
.x1(function(d){return d[0]+0.5})
.y0(function(d,i){return d[1]})
.y1(function(d,i){return d[1]});
var lineArea = lineAreaGenerator(points);
svg.append("path")
.attr("d", lineArea)
.attr("id","line")
如果这确实是您选择的方法,那么您可能希望将区域生成器代码分离到一个函数中。我已经在这个 JSFiddle 中展示了如何做到这一点:https ://jsfiddle.net/6e03o42f/4/
希望这可以帮助!
推荐阅读
- python - Flask 语法 f-string 带单引号
- kubernetes - 无法连接到服务器:dial tcp 127.0.0.1:45451: connectex: No connection could be made because the target machine主动拒绝
- java - 如何使用按键停止按键循环
- angular - 在 Angular 模板中访问联合类型的属性
- ios - 在连接到 Focusrite 2i2 的 AKFrequencyTracker 上获得奇怪的频率读数
- reactjs - React useState hook - 更新状态时何时使用先前的状态?
- android - 如何在 Android Studio 上使用应用内购买销售图片
- scala - 单位类型的所有值都可以用单位创建吗?
- google-chrome - Pyppeteer 超时后查询页面内容?
- git - 在分离头时将多个提交放入新分支