线条笔划宽度不反映在d3 js中的两个区域之间

Question

我正在尝试在两个区域之间绘制一条曲线，但我无法给线条提供笔画宽度。这是我试过的

    var w = 700,
          h = 250,
          margin = { top: 40, right: 20, bottom: 20, left: 40 },
          radius = 6;


var linePoints = [
    [0, 100],
    [20, 150],
    [40, 90],
    [50, 120],
    [60, 80],
    [60, 150],
    [130, 80],
    [150, 80],
    [200, 75],
    [250, 70],
];



var lineGenerator = d3.line()
   .curve(d3.curveNatural);

var xScale = d3.scaleLinear().domain(
    [0, 250]
).range([0,750])
var yScale = d3.scaleLinear().domain(
    [0, 200]
).range([0, 150])



var areaBelow = d3.area()
    .x(function(d) { return xScale(d[0]); })
    .y0(h)
    .y1(function(d) { return yScale(d[1]); });
var areaAbove  =  d3.area()
    .x(function(d) { return xScale(d[0]); })
    .y0(0)
    .y1(function(d) { return yScale(d[1]); });  

var circlePoints = [
    [5, 100],
    [20, 150],
    [50, 120],
    [60, 80],
    [200, 75],

]
var pathData = lineGenerator(linePoints.map(function(d){ return [xScale(d[0]), yScale(d[1])]}));



d3.select('svg').append('path')
    //.attr("class", "line")
    .attr('d', pathData)
    .attr('stroke-width', 5)
    .attr('stroke', 'white')
    .attr("fill", "none");


d3.select('svg').append("path")
        .datum(linePoints)
        .attr("class", "area-below")
        .attr("d", areaBelow);

d3.select('svg').append("path")
        .datum(linePoints)
        .attr("class", "area-above")
        .attr("d", areaAbove);



d3.select('svg')
    .selectAll('circle')
    .data(circlePoints)
    .enter()
    .append('circle')
    .attr('cx', function(d) {
        return xScale(d[0]);
    })
    .attr('cy', function(d) {
        return yScale(d[1]);
    })
    .attr('r', 10)
    .attr('id', function(d, i) {
        return `circle-${i}`
    });    


d3.select('#circle-1').attr('class', 'inner-circle');