javascript - d3 + vx 反应图表曲线在每个数据点处平坦
问题描述
我正在尝试按照https://dribbble.com/shots/2673159-Funnel-UI-concept/attachments/538068的方式构建一些东西
我查看了 d3/vx 提供的所有曲线,但似乎没有一条曲线出现在每个不同的步骤之间,并且线在数据点处是平坦的。我是否缺少类似于上面的曲线类型?如果没有并且它需要自定义曲线,是否有比 d3 文档更深入地描述如何实现自定义曲线的地方?
解决方案
没有标准曲线可以做到这一点;但是,如果重复添加额外的点以强制标准 d3 曲线在需要的地方变平,则可能是可能的。例如,在舞台变化前后添加点,y 值相同。
但是,自定义曲线可以工作并避免数据操作的需要。贝塞尔曲线应该可以解决问题。使用起点、目的地和控制点,例如:
此代码笔中的图像
为了实现这个想法,我们可以将标准曲线中的点函数替换为绘制贝塞尔曲线的函数,例如 d3.curveLinear。
d3.curveLinear 的点函数进行比较:
function(x, y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
case 1: this._point = 2; // proceed
default: this._context.lineTo(x, y); break;
}
以及新的点功能:
function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y); // bezierCurveTo(controlPoint1X,controlPoint1Y,controlPoint2X,controlPoint2Y,endPointX,endPointY)
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
我为每个控制点使用相同的 x 值,这可能并不理想,因为它们的末端可能不够平坦,但很容易改变
我们可以使用 d3.curveLinear 创建自定义曲线,并代入这个新的点函数:
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
这很容易工作:
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var data = [
[10,10],
[160,50],
[310,100]
];
var line = d3.line()
.curve(curve);
d3.select("svg")
.append("path")
.attr("d",line(data));
d3.select("svg")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("transform", function(d) {
return "translate("+d+")";
})
.attr("r",3)
path {
fill: none;
stroke: black;
stroke-width:1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="500"></svg>
这是一个为每个阶段绘制漏斗的区域演示。根据您的数据,这可能会或可能不会更可取。我的假数据是按阶段构建的,因此最容易单独绘制每个阶段。将所有阶段统一到一个路径/区域中可能会有点困难。
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var data = [
{stage:1, start:1,end:0.5},
{stage:2, start:0.5,end:0.2},
{stage:3, start:0.2,end:0.1},
{stage:4, start:0.1,end:0.005}
]
var yRangeMax = 100;
var y = d3.scaleLinear()
.range([yRangeMax,0]);
var x = d3.scaleBand()
.range([50,400])
.domain(data.map(function(d) {
return d.stage;
}))
var svg = d3.select("svg");
var area = d3.area()
.curve(curve)
.y1(function(d) { return yRangeMax*2-d[1]; })
.y0(function(d) { return d[1]; })
svg.selectAll(null)
.data(data)
.enter()
.append("path")
.attr("d", function(d) {
var p1 = [x(d.stage),y(d.start)]
var p2 = [x(d.stage)+x.step(),y(d.end)]
return area([p1,p2])
})
path{
stroke: #bbb;
stroke-width: 1px;
fill:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<svg width="600" height="400"></svg>
推荐阅读
- intellij-idea - 如何为 Intellij Async Profiler 启用挂钟分析?
- mysql - 当两列具有相同的值时,INSERT WHERE NOT EXISTS 不起作用
- android - 第二个recyclerview滚动不顺畅
- angular - ADFS 2016:注销后无法重定向到登录页面
- javascript - 如何在 MVC 控制器中通过 WebApi 从 HTML 页面发布数据
- javascript - Gatsby:基于 window.innerWidth 行为不端的 React 条件渲染
- sharepoint - 更改 Sharepoint 在线背景
- node.js - 为什么我要返回 [Object Promise] 而不是回调
- php - 获取:“尝试获取非对象的属性”时尝试访问对象数组中的值
- authentication - 即使使用 AuthorizeFilter,Asp.Net Core MVC 中间件也会返回 404 而不是 401