我正在处理带有 x 轴和 y 轴的 d3.js .v4 图形，我需要你的帮助。
描述:
xAxis 是线性缩放的，就像这张图片一样。 
我被困在这里，找不到像这张图片上那样制作路径的解决方案 path with rounded corner
这是我的行函数代码
// the path generator for the line chart
line = d3.line()
.x(function(d, i) {
return xScale(i);
})
.y(function(d, i) {
return yScale(d);
})
.curve(d3.curveStep);我尝试使用 cardinal、monotone 和 catmull，但无法归档所需的路径。
是否可以在 d3.curveStep 上进行圆 Angular 处理？
最佳答案
我终于找到时间回到这个问题上了。这是实现 custom curve 的绝佳机会.我基本上把源代码偷到了d3.curveStepBefore并修改以满足您的要求。
function Step(context, t) {
this._context = context;
this._t = t;
}
Step.prototype = {
areaStart: function() {
this._line = 0;
},
areaEnd: function() {
this._line = NaN;
},
lineStart: function() {
this._x = this._y = NaN;
this._point = 0;
},
lineEnd: function() {
if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);
if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;
},
point: function(x, y) {
x = +x, y = +y;
switch (this._point) {
case 0:
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:
{
var xN, yN, mYb, mYa;
if (this._t <= 0) {
xN = Math.abs(x - this._x) * 0.25;
yN = Math.abs(y - this._y) * 0.25;
mYb = (this._y < y) ? this._y + yN : this._y - yN;
mYa = (this._y > y) ? y + yN : y - yN;
this._context.quadraticCurveTo(this._x, this._y, this._x, mYb);
this._context.lineTo(this._x, mYa);
this._context.quadraticCurveTo(this._x, y, this._x + xN, y);
this._context.lineTo(x - xN, y);
} else {
var x1 = this._x * (1 - this._t) + x * this._t;
xN = Math.abs(x - x1) * 0.25;
yN = Math.abs(y - this._y) * 0.25;
mYb = (this._y < y) ? this._y + yN : this._y - yN;
mYa = (this._y > y) ? y + yN : y - yN;
this._context.quadraticCurveTo(x1, this._y, x1, mYb);
this._context.lineTo(x1, mYa);
this._context.quadraticCurveTo(x1, y, x1 + xN, y);
this._context.lineTo(x - xN, y);
}
break;
}
}
this._x = x, this._y = y;
}
};
stepRound = function(context) {
return new Step(context, 0.5);
};
stepRoundBefore = function(context) {
return new Step(context, 0);
};
stepRoundAfter = function(context) {
return new Step(context, 1);
};<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var width = 500,
height = 500,
N = 10;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var points = [];
for (var i = 0; i < N; i++) {
points.push({
x: (width / N) * i + (width / N / 2),
y: Math.random() * height
});
}
var line1 = d3.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
})
.curve(stepRound);
var line2 = d3.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
})
.curve(d3.curveStep);
svg.append('path')
.datum(points)
.attr('d', line1)
.attr('fill', 'none')
.attr('stroke', 'orange')
.attr('stroke-width', '3px');
svg.append('path')
.datum(points)
.attr('d', line2)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-width', '1px');
});
</script>
</body>
</html>关于javascript - d3.js自定义曲线步轮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40729164/