如何使用D3.js在圆圈内获得折线图

时间:2017-04-08 21:53:50

标签: javascript d3.js svg

我必须使用D3做一些图表。首先是饼图,然后是饼图孔内的折线图。我现在知道如何制作折线图,并将其转换为饼图的中心,但问题在于如何填充折线图。 如何以曲线形式填充折线图?

我必须做什么

Design

我做了什么

What I have so far

我必须得到折线图的代码:

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');

0 个答案:

没有答案