d3js - Tạo biểu đồ giống như Asterplot (ví dụ bao gồm)

Tôi mới dùng d3js, nhưng quen thuộc với javascript và nguyên tắc hiển thị dữ liệu.d3js - Tạo biểu đồ giống như Asterplot (ví dụ bao gồm)

Tôi đã cố gắng đạt được một hiệu ứng để hình dung 2 thứ nguyên của dữ liệu bằng cách sử dụng biểu đồ cốt truyện aster, nhưng không thể thực sự làm việc này như mong đợi.

Được đính kèm, bạn sẽ tìm thấy sơ đồ mà tôi đang cố gắng tạo lại và mã ví dụ của mình. Nó sẽ là rất lớn nếu bạn có thể cho tôi biết làm thế nào để làm cho nó hoạt động - hoặc làm thế nào để tối ưu hóa nó! :)

D3JS - Aster Plot Preview

Đây là cách tôi nghĩ rằng các dữ liệu và mã nên trông giống như .. kinda .. (Pseudo-Mã đến ..)

dữ liệu Ví dụ:

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

Ví dụ mã:

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

Bằng cách nào đó mã của tôi trông phức tạp hơn .. Mặc dù nó vẫn là mã giả .. Tôi vẫn đang vật lộn .. Nếu ai đó có thể cho tôi một gợi ý hoặc một số mã làm việc để bắt đầu từ tôi sẽ rất biết ơn!

Cảm ơn trước - Chris

Nguồn

2016-02-15 Christian Wisniewski

Bạn đã thấy cái này: http://bl.ocks.org/bbest/2de0e25d4840c68f2db1? Nếu có, điều gì sẽ ngăn cản bạn sử dụng nó làm cơ sở? – Arthur

Hey - Tôi đã nhìn thấy mã này! Tôi vẫn còn thiếu một số pricinples của D3JS logic .. Một cách khác là để tạo ra Pie/Donu-Charts tập trung và để co lại outerRadius .. Nhưng tôi nghĩ theo cách của tôi sẽ là legit là tốt. Sự cố với AsterPlot: Tôi cần vẽ chế độ xem lưới như trong ví dụ hình ảnh - đó là lý do tại sao tôi phải thực hiện một số phép thuật lặp:/ –

OK, tôi sẽ trả lời khi tôi tìm thấy thời gian – Arthur

Dưới đây là một thực hiện nhanh chóng mà tái tạo biểu đồ của bạn. Nó chủ yếu được xây dựng bảng xếp hạng donut tâm dựa trên trọng lượng và sau đó màu sắc những lát dựa trên điểm:

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

Nguồn

2016-02-16 01:36:09 Mark

Wow !! Cảm ơn nhiều! Tôi sẽ kiểm tra mã của bạn .. Tôi đã cố gắng làm điều đó theo cách này. –

d3js - Tạo biểu đồ giống như Asterplot (ví dụ bao gồm)

Trả lời

Các vấn đề liên quan