Javascript 如何使用D3.js获取圆内的折线图
我必须用D3做一些图表。首先是饼图,然后是饼孔内的折线图。我现在知道如何绘制折线图,并将其转换到饼图的中心,但问题是折线图是如何填充的如何用曲线形式填充折线图? 我必须做的事: 我所做的: 代码我必须得到一个折线图:Javascript 如何使用D3.js获取圆内的折线图,javascript,d3.js,svg,Javascript,D3.js,Svg,我必须用D3做一些图表。首先是饼图,然后是饼孔内的折线图。我现在知道如何绘制折线图,并将其转换到饼图的中心,但问题是折线图是如何填充的如何用曲线形式填充折线图? 我必须做的事: 我所做的: 代码我必须得到一个折线图: var months = [ {month: 1, amount: 120000}, ... ]; var calculateX = d3.scaleLinear().range([0, this.width]) .domain(d3.e
var months = [
{month: 1, amount: 120000},
...
];
var calculateX = d3.scaleLinear().range([0, this.width])
.domain(d3.extent(months, (d) => d.month * 10));
var calculateY = d3.scaleLinear().range([0, (this.height / 2) - 20])
.domain([d3.min(months, (d) => d.amount), d3.max(months, (d) => d.amount)]);
var lines = d3.line()
.x(function (d) {
return calculateX(d.month * 10);
})
.y(function (d) {
return calculateY(d.amount);
})
.curve(d3.curveBasis);
lineGraph.datum(this.months);
lineGraph.append('path')
.attr('class', 'median-line')
.attr('d', lines)
.style("stroke", '#DAF2CD')
.style("fill", '#D0ECB8');
使用clipPath:或者面具谢谢。我用了克利帕斯!