d3js - Tworzenie wykresów typu Asterplot (przykład dołączony)

Jestem nowy w d3js, ale znam javascript i zasady wizualizacji danych.d3js - Tworzenie wykresów typu Asterplot (przykład dołączony)

Próbowałem uzyskać efekt wizualizacji 2 wymiarów danych za pomocą diagramu wykresu aster, ale nie można tego tak naprawdę uruchomić, tak jak się tego spodziewano.

W załączeniu znajdziesz diagram, który próbuję odtworzyć i mój przykładowy kod. Byłoby olbrzymie, gdybyś mógł mi powiedzieć, jak sprawić, żeby działało - lub jak go zoptymalizować! :)

D3JS - Aster Plot Preview

ten sposób myślę dane i kod powinien wyglądać .. troche .. (Pseudo-Code przychodzące ..)

danych Przykład:

var testData = { 
     maxPoints: 10, 
     color: '#bababa', 
     border: { 
     width: 1, 
     color: '#ffffff' 
     }, 
     items: [ 
     { 
      name: 'Looks', 
      color: '#2976dd', 
      weight: 0.37, 
      points: 8 
     },{ 
      name: 'Charm', 
      color: '#87bd24', 
      weight: 0.03, 
      points: 5 
     },{ 
      name: 'Honesty', 
      color: '#406900', 
      weight: 0.16, 
      points: 7 
     },{ 
      name: 'Humour', 
      color: '#ffb200', 
      weight: 0.31, 
      points: 9 
     },{ 
      name: 'Intelligence', 
      color: '#f78200', 
      weight: 0.12, 
      points: 0 
     } 
     ] 
    };

Przykładowy kod:

var archs = []; 
    // Loop through each item 
    var circleRadius = 400; 
    var innerRadius = 100; 

    var startAngle = 0; 
    var endAngle = 0; 
    for (var i = 0; i < testData.items.length; i++) { 
    // Draw each arch 
    var maxPoints = testData.maxPoints; 
    var archHeight = (circleRadius - innerRadius)/maxPoints; 
    var startRadius = innerRadius; 

    endAngle += testData.items[i].weight; 

    for (var j = 0; j < maxPoints; j++) { 
     var color = testData.color; 
     // draw arch - don't know how to colorize accordingly.. 
     if (testData.items[i].points < j) { 
     // color this arc somehow.. 
     color = testData.items[i].color; 
     } 

     d3.svg.arc() 
     .startAngle(startAngle) 
     .endAngle(endAngle) 
     .innerRadius(startRadius) 
     .outerRadius(startRadius+archHeight); 

     // Increase startRadius 
     startRadius += archHeight; 
    } 

    // Increase startAngle 
    startAngle = endAngle; 
    }

W jakiś sposób mój kod wygląda na bardziej skomplikowany .. Chociaż to wciąż pseudo-kod ... Ciągle walczę. Jeśli ktoś mógłby mi podać podpowiedź lub jakiś działający kod, byłbym bardzo wdzięczny!

góry dzięki - Chris

Źródło

2016-02-15 Christian Wisniewski

Widziałeś ten: http://bl.ocks.org/bbest/2de0e25d4840c68f2db1? Jeśli tak, co uniemożliwiłoby ci użycie go jako podstawy? – Arthur

Hej - widziałem ten kod! Ciągle brakuje mi pewnych szczegółów logiki D3JS. Innym sposobem byłoby stworzenie koncentrycznych wykresów Pie / Donu i zmniejszenie zewnętrznego wymiaru .. Ale myślałem, że moja droga byłaby uzasadniona. Problem z AsterPlot: Potrzebuję narysować widok siatki, jak na przykładzie obrazka - dlatego będę musiał zrobić trochę magii pętli:/ –

OK, spróbuję odpowiedzi, gdy znajdę czas – Arthur

Oto szybka realizacja, która replikuje swój schemat. To zasadniczo opiera koncentryczne wykresy pączka na podstawie masy ciała, a następnie kolorach plastry na podstawie punktów:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .arc path { 
 
    stroke: #fff; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var testData = { 
 
     maxPoints: 10, 
 
     color: '#bababa', 
 
     border: { 
 
     width: 1, 
 
     color: '#ffffff' 
 
     }, 
 
     items: [{ 
 
     name: 'Looks', 
 
     color: '#2976dd', 
 
     weight: 0.37, 
 
     points: 8 
 
     }, { 
 
     name: 'Charm', 
 
     color: '#87bd24', 
 
     weight: 0.03, 
 
     points: 5 
 
     }, { 
 
     name: 'Honesty', 
 
     color: '#406900', 
 
     weight: 0.16, 
 
     points: 7 
 
     }, { 
 
     name: 'Humour', 
 
     color: '#ffb200', 
 
     weight: 0.31, 
 
     points: 9 
 
     }, { 
 
     name: 'Intelligence', 
 
     color: '#f78200', 
 
     weight: 0.12, 
 
     points: 0 
 
     }] 
 
    }; 
 

 
    var width = 500, 
 
     height = 500; 
 
     color = d3.scale.category20(); 
 
    
 
    // inner radius 
 
    var iR = 75, 
 
    // radius of each concentric arc 
 
     r = ((Math.min(width, height)/2) - iR)/testData.maxPoints; 
 
     
 
    var pie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { 
 
     return d.weight; 
 
     }) 
 
     .padAngle(.01); 
 

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

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(testData.items)) 
 
     .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    // iterate our number of rings 
 
    d3.range(testData.maxPoints) 
 
     .forEach(function(i){ 
 
     
 
     // generate an arc 
 
     var arc = d3.svg.arc() 
 
      .outerRadius(r * (i + 1) + iR) 
 
      .innerRadius(r * i + iR); 
 
     
 
     // fill it, if appropriate 
 
     g.append("path") 
 
      .attr("d", arc) 
 
      .style("fill", function(d) { 
 
      if (i < d.data.points) 
 
       return color(d.data.name); 
 
      else 
 
       return "#eee" 
 
      }); 
 
    }); 
 

 
    </script>

Źródło

2016-02-16 01:36:09 Mark

Łał!! Wielkie dzięki! Sprawdzę twój kod ... Próbowałem zrobić to w ten sam sposób. –

d3js - Tworzenie wykresów typu Asterplot (przykład dołączony)

Odpowiedz

Powiązane problemy