Радиолокационная карта d3 в версии 5, не может отобразить объект «путь» - PullRequest
Новая
       15

Радиолокационная карта d3 в версии 5, не может отобразить объект «путь»

0 голосов
/ 09 февраля 2019

Я пытаюсь создать очень простую радиолокационную карту с помощью 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')
}

Приведенный выше код не показывает ошибок.Десять осей нарисованы правильно. Однако путь не отображается. При проверке веб-сайта присутствуют все радар-обертки, а также десять элементов radarStroke. Но элементы хода радара не имеют никакого атрибута d, поэтому по какой-то причине онине получают данные.

Я не смог найти решения этой проблемы. Если я не смогу, я попытаюсь просто использовать однострочные объекты вместо объекта пути и подключитьсякаждая точка данных в отдельности отображает путь, но я бы хотел, чтобы путь работал здесь. Спасибо за любую помощь.

1 Ответ

0 голосов
/ 03 мая 2019

Я использовал этот пример , чтобы решить эту проблему.Кажется, что ему нужны данные вместо данных, поскольку это всего лишь одна линия, соединяющая все точки. 

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