v5中的d3雷達圖，無法渲染“路徑”對象

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