D3.js 填充不使用areaRadial（）生成的形状

我现在正在做一件事，以后应该看起来像一盏熔岩灯。不幸的是，我一开始就失败了： 我设法创建了随机生成的斑点，但我就是不能应用填充。笔划很好

以下是创建BLOB的相关代码：

var ctx = this; // context

this.path = d3.areaRadial()
    .angle(function(d) {return d.theta})
    .radius(function(d) {return d.r})
    .curve(d3.curveCatmullRomClosed.alpha(1));

// create the blob
this.create = function() {
    var anchors = [];
    for (var i = 0; i < ctx.options.anchors; i++) {
        var currTheta = i * (360 / ctx.options.anchors) + rand(ctx.options.spread.theta);
        var currRadians = Math.radians(currTheta);
        var currRadius = ctx.options.radius + rand(ctx.options.spread.r);

        anchors.push({theta: currRadians, r: currRadius});
    }

    var pathData = ctx.path(anchors);
    d3.select(ctx.options.target).append('path')
        .attr('d', pathData)
        .attr('class', 'blob')
        .style('opacity', ctx.options.opacity)
        .style('transform', 'translate(' + ctx.x + 'px, ' + ctx.y + 'px)')
        .attr('transform', 'translate(' + ctx.x + 'px, ' + ctx.y + 'px)');

    console.log(pathData);
}

function rand(x) // creates a random number between -0.5 * x and 0.5 * x

完整代码：

谢谢

问题在于pathData，因为如果将.attr'd'，pathData替换为.attr'd'，M37,17v15H14V17z M50,0H0v50h50z'，这是一个有效路径，则填充工作正常

---

我会继续搜索问题，只是想给你一个提示，也许你会比我更快地找到问题

这是预期的行为，因为您正在使用，即：

与area.y等效，只是访问器返回半径：距离原点的距离⟨0,0⟩.

对于面积y：

如果指定了y，则将y0设置为y，将y1设置为null，并返回此区域生成器。如果未指定y，则返回当前y0访问器。重点矿山

因此，您可能希望在这里使用外包装

这是仅包含该更改的代码：

作用{ 严格使用； //窗口大小 var windowX=window.innerWidth； var windowY=window.innerHeight； var svgX=windowX； var-svgY=windowY； var blobCount=1； 函数初始化{ //console.lognewblob； var svg=d3。选择“svg” .attr'viewBox'，0'+svgX+''+svgY .attr'preserveSpectratio'、'xMinYMin meet'； 对于变量i=0；i谢谢！我还发现它是路径，但我不知道如何调试它，因为它是从D3自动生成的。杰勒多找到了答案。

this.path = d3.areaRadial()
    .angle(function(d) {
        return d.theta
    })
    .outerRadius(function(d) {
        return d.r
    })
    .curve(d3.curveCatmullRomClosed.alpha(1));