D3.js Рисование линий радиолокационной карты

Я пытаюсь создать радиолокационную карту, похожую на ссылку здесь ( http://www.larsko.org/v/euc/).

Я был в состоянии создать оси ( моя работа до сих пор), но у меня есть проблема, чтобы нарисовать линии в нем.

Например, если у меня есть список значений, как показано ниже, как я могу нарисовать линию на радиолокационной карте?

var tempData = [56784, 5.898, 3417, 0, 0, 0]

Изменить: я включил код. У меня проблема с поиском координат XY, и я думаю, что значение XY должно быть получено из "масштабов".

var width = 1000,
  height = 960,
  r = (960 / 2) - 160;

var svg = d3.select("#radar")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + ", " + height / 2 + ")");

d3.csv("data/results.csv", function(data) {
      var headerNames = d3.keys(data[0]);
      headerNames.splice(0, 1); //Remove 'scenario'

      var minList = $.map(headerNames, function(h) {
          return d3.min($.map(data, function(d) {
            return d[h];
          }));
        }),

        maxList = $.map(headerNames, function(h) {
          return d3.max($.map(data, function(d) {
            return d[h];
          }));
        }),

        scales = $.map(headerNames, function(h, i) {
          return d3.scale.linear()
            .domain([minList[i], maxList[i]])
            .range([50, r]);
        }),

        axes = $.map(headerNames, function(h, i) {
          return d3.svg.axis()
            .scale(scales[i])
            .tickSize(4);
        });

      function angle(i) {
        return i * (2 * Math.PI / headerNames.length) + Math.PI / headerNames.length;
      }

      var line = d3.svg.line()
        .interpolate("cardinal-closed")
        /* computing X and Y: I am having a problem here 
        .x(function(d){ return scales(d); })
        .y(function(d){ return scales(d); }); */


      $.each(axes, function(i, a) {
          svg.append("g")
            .attr("transform", "rotate(" + Math.round(angle(i) * (180 / Math.PI)) + ")")
            .call(a)
            .selectAll("text")
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
              return "rotate(" + -angle(i) * (180 / Math.PI) + ")";
            })

          //Drawing line
          svg.selectAll(".layer")
            .data(data)
            .enter()
            .append("path")
            .attr("class", "layer")
            .attr("d", function(d) {
              return line(d);
            })

        }) // End CSV

Пример сценария results.csv, n_dead_oaks, процент_деад_оакс., Зараженного_задачи,money_spent,area_treated_ha, цена_пер_оак, базовый уровень,56784,5.898,3417,0,0,0 scen2,52725,5.477,3294,382036,35,94.12071939 RS_1 54071928 RS_1 5807 1928, 796705,59, -635,8379888 RS_2,33571,3,487,2555,1841047,104,79.31103261 RS_3,46111,4,79,2762,1176461,61,110,227771

Источник

2 ответа

Решение

Я думаю, что у меня есть решение на данный момент, и я ценю все ваши ответы! Вот мое текущее решение для моей публикации.

function getRowValues(data) {
  return $.map(data, function(d, i) {
    if (i != "scenario") {
      return d;
    }
  });
}

function getCoor(data) {
  console.log(data);
  var row = getRowValues(data),
    x,
    y,
    coor = [];
  for (var i = 0; i < row.length; i++) {
    x = Math.round(Math.cos(angle(i)) * scales[i](row[i]));
    y = Math.round(Math.sin(angle(i)) * scales[i](row[i]));
    coor.push([x, y]);
  }
  return coor;
}

var line = d3.svg.line()
  .interpolate("cardinal-closed")
  .tension(0.85);

svg.selectAll(".layer")
  .data(data)
  .enter()
  .append("path")
  .attr("class", "layer")
  .attr("d", function(d) { return line(getCoor(d)) + "Z"; })
  .style("stroke", function(d, i){ return colors[i]; })
  .style("fill", "none");
Источник

Как предложил Squeegy, вы должны поделиться некоторым кодом, показывающим ваш текущий прогресс и ваши достижения в создании осей.

В любом случае, вот как я бы поступил по этому поводу:

  1. Для заданного списка значений, которые вы хотите представить в виде линии, найдите координаты [x,y] каждой точки линии, т.е. разместите точки данных на каждой оси. Если у вас уже есть система масштабирования для рисования ваших осей, это не должно быть слишком сложно.

  2. Используйте d3.svg.line, чтобы нарисовать линию, которая проходит через все эти точки.

Код в конечном итоге будет выглядеть так:

var tempData = [56784, 5.898, 3417, 0, 0, 0];

/** compute tempPoints from tempData **/

var tempPoints = [[123, 30], [12, 123], [123, 123], [0,0], [0,0], [0,0]];
var line = d3.svg.line();
d3.select('svg').append('path').attr('d', line(tempPoints) + 'Z'); // the trailing Z closes the path
Источник
Другие вопросы по тегам