V5 中的 D3 雷达图，无法渲染'path'对象

Question

我正试图用d3创建一个非常简单的雷达图。我只想要10个空白轴，每个轴指定十个值中的一个(每个轴的刻度相同，0-100)。到目前为止，我已经能够正确地渲染轴。我还想要一条连接所有点的线(一个"路径"对象)。到目前为止，我还没能让它出现。

我一直在研究这个例子(http://bl.ocks.org/nbremer/21746a9668ffdf6d8242)。从本质上讲，我试图在radarChart()fn中为我省去不必要的东西，并在我正在使用的d3v5上转换代码。

这是我传递给函数的数据：

var rand = randData();
//data in format for radarchart func
var d = [
{axis: "1", value: rand[0]},
{axis: "2", value: rand[1]},
{axis: "3", value: rand[2]},
{axis: "4", value: rand[3]},
{axis: "5", value: rand[4]},
{axis: "6", value: rand[5]},
{axis: "7", value: rand[6]},
{axis: "8", value: rand[7]},
{axis: "9", value: rand[8]},
{axis: "10", value: rand[9]}
];

radar.js:

function radarchart(id, data){
//some vars set here, removed for brevity
var svg = d3.select(id)
var r_scale = d3.scaleLinear()
.domain([0, max_value])
.range([0, radius])
var g = svg.append('g')
.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + 
(cfg.h/2 + cfg.margin.top) + ")");
//wrapper for axes
var axis_grid = g.append('g').attr('class', 'axisWrapper');
var axis = axis_grid.selectAll('.axis')
.data(all_axis)
.enter()
.append('g')
.attr('class', 'axis')
//draws actual axes
axis.append('line')
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", function(d, i) {
return r_scale(max_value) * Math.cos(angle_slice*i - Math.PI/2); 
})
.attr("y2", function(d, i) { 
return r_scale(max_value) * Math.sin(angle_slice*i - Math.PI/2); 
})
.attr('class', 'line')
.style('stroke', 'black')
.style('stroke-width', 2);

//Problem area is below
//radial line func which should make the bounds of the data area
var radar_line = d3.lineRadial()
.radius(function(d) { return r_scale(d.value); })
.angle(function(d,i) {  return i*angle_slice; });
var data_area = g.selectAll('.radarWrapper')
.data(data)
.enter().append('g')
.attr('class', 'radarWrapper');
//the path around the data area
data_area.append('path')
.attr('class', 'radarStroke')
.attr('d', function(d) { return radar_line(d); })
.style('stroke-width', 2)
.style('stroke', 'black')
.style('fill', 'none')
}

上面的代码显示没有错误。正确绘制了十个轴。但是，没有显示任何路径。当检查网站时，所有的radarWrappers都在那里，还有十个radarStroke元素。但雷达笔划元素没有任何属性"d"，因此出于某种原因，它们无法获得数据。

我一直没能找到解决这个问题的办法。如果不能，我将尝试只使用单行对象，而不是路径对象，并单独连接每个数据点以提供路径的外观，但我希望在这里使用路径。谢谢你的帮助。

Answer 1

我用这个例子来解决这个问题。似乎它需要数据而不是数据，因为它只是连接所有点的一条线。

const radarLine = d3.lineRadial()
.curve(d3.curveCardinalClosed)
.radius(d => rScale(d.value))
.angle((d, i) => i * angleSlice);
// Problem area
// g.selectAll(".radarArea")
//     .data(radData)
//     .enter().append("path")
//     .attr("class", "radarArea")
//     .attr("d", (d,i) => radarLine(d, i))
//     .style("fill", 'skyblue');
// Fix
g.append("path")
.datum(radData)
.attr("fill", 'skyblue')
.attr("d", radarLine);