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

我用这个example解决了这个问题。好像是基准，而不是数据，因为它只是连接所有点的一条线。

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

v5中的d3雷达图，无法渲染“路径”对象

1 个答案: