d3js - Создание диаграмм типа Asterplot (пример включен)

Я новичок в d3js, но знаком с javascript и принципами визуализации данных.d3js - Создание диаграмм типа Asterplot (пример включен)

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

В комплекте вы найдете диаграмму, которую я пытаюсь воссоздать, и мой пример кода. Было бы огромно, если бы вы могли рассказать мне, как заставить его работать - или как его оптимизировать! :)

D3JS - Aster Plot Preview

Это, как я думаю, что данные и код должен выглядеть .. вроде .. (Псевдо-код входящий ..)

Пример данных:

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

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

Заранее спасибо - Крис

источник

2016-02-15 Christian Wisniewski

Вы это видели один: http://bl.ocks.org/bbest/2de0e25d4840c68f2db1? Если да, то что помешало бы вам использовать его в качестве базы? – Arthur

Эй, я видел этот код! Я по-прежнему не хватает некоторых достоинств логики D3JS. Еще один способ - создать концентрические Pie/Donu-Charts и урезать внешний Radius. Но я думал, что мой путь будет законным. Проблема с AsterPlot: мне нужно нарисовать сетку, как в примере с изображением - вот почему мне нужно сделать некоторую петлевую магию:/ –

OK, я попробую ответить, когда найду какое-то время – Arthur

Вот быстрое внедрение, размножающийся вашу диаграмму. Это по существу создает концентрические диаграммы пончика, основанные на вес, а затем цвета ломтиков на основе точек:

<!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>

источник

2016-02-16 01:36:09 Mark

Вау!! Большое спасибо! Я собираюсь проверить ваш код. Я тоже пытался это сделать. –

d3js - Создание диаграмм типа Asterplot (пример включен)

ответ

Смежные вопросы