Стандартной кривой для этого не существует; однако это может быть возможно, если продублировать добавление дополнительных точек, чтобы заставить стандартную кривую 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>
Что касается руководства по пользовательским кривым, я не видел много ресурсов. Однако эти ответы (a, b) может оказаться полезным.
19.03.2019