D3.js Radartext Strichzeichnung

Question

Ich versuche ein ähnliches Radardiagramm zu erstellen ( http://www.larsko.org/v/euc/).

Ich konnte Achsen erstellen (my work so far), aber ich habe ein Problem, Linien darin zu zeichnen.

Zum Beispiel, wenn ich eine Liste von Werten habe, so wie unten, wie kann ich eine Linie in der Radardiagramm zeichnen?

var TempData = [56.784, 5.898, 3.417, 0, 0, 0]

Edit: Ich habe Code enthalten. Ich habe ein Problem, XY-Koordinaten zu finden, und ich denke, XY-Wert muss von "Skalen" abgeleitet werden.

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 

Beispiel results.csv Szenario n_dead_oaks, percent_dead_oaks, infected_area_ha, money_spent, area_treated_ha, price_per_oak Basislinie, 56784,5.898,3417,0,0,0 scen2,52725,5.477,3294, 382036,35,94.12071939 RS_1,58037,6.028,3407,796705,59, -635,8379888 RS_2,33571,3.487,2555,1841047,104,79.31103261 RS_3,46111,4.79,2762,1176461,61,110.227771

Answer 1

Ich glaube, ich habe eine Lösung für jetzt und ich schätze alle Ihre Antwort! Hier ist meine aktuelle Lösung für meine Veröffentlichung.

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

Answer 2

Wie SECEGY vorgeschlagen hat, solltest du Code teilen, der deinen aktuellen Fortschritt zeigt und wie Sie haben erreicht, die Achsen zu erstellen.

Anyways, das ist, wie ich über diese gehen würde:

1. Für eine gegebene Liste von Werten, die Sie als eine Linie darstellen möchten, finden Sie die [x, y] Koordinaten von jedem Punkt der Linie, dh platzieren Sie Ihre Datenpunkte auf jeder Achse. Wenn Sie bereits ein Maßstabssystem zum Zeichnen Ihrer Achsen haben, sollte dies nicht zu schwer sein.

2. Verwenden Sie d3.svg.line, um eine Linie zu zeichnen, die alle diese Punkte durchläuft.

Der Code würde am Ende wie folgt suchen:

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