D3: biểu đồ đo với vòng cung đang phát triển

Question

Tôi muốn đạt được thứ gì đó giống như vòng cung đang phát triển cho biết 5 cấp độ (xem hình). Dữ liệu của tôi chỉ có giá trị số nguyên nằm trong khoảng từ 1 đến 5. Bạn có thể bỏ qua biểu tượng ở giữa lúc này. Có khả năng nào đạt được điều gì đó như thế trong d3? Tôi không thể tìm thấy bất kỳ ví dụ cho việc này. Hơn nữa tôi đã thử nó với một cách tiếp cận cắt bánh (donut) biểu đồ, nhưng tôi không thể làm cho vòng cung phát triển ... Tôi sẽ đánh giá cao sự giúp đỡ nào! Cảm ơn vì điều đó.

Answer 1

Bạn có thể thực hiện việc này với d3 mà không phụ thuộc vào hình ảnh bên ngoài, hình thu nhỏ SVG hoặc bất kỳ thứ gì trong DOM - chỉ cần d3.js.

Đây là số working fiddle. Việc thực hiện được giải thích dưới đây. Nhưng ngoài ra, đây là một mã số more advanced làm hoạt hình đường dẫn clip trên vòng cung đang phát triển. Kiểm tra its predecessor để xem mặt nạ trông như thế nào mà không bị cắt.

Trước tiên, bạn cần đại diện cho đồ họa dưới dạng mảng dữ liệu mà bạn liên kết với d3. Cụ thể, bạn cần có một màu sắc và một "dòng lệnh" (chuỗi bạn gán cho d như trong <path d="..."> Something như thế này:.

var segmentData = [ 
    { color:"#ED6000", cmd:"M42.6,115.3c5.2,1.5,11,2.4,16.8,2.4c1.1,0,2.7,0,3.7-0.1v-2.2c-7,0-13.1-1.3-18.8-3.6L42.6,115.3z" }, 
    { color:"#EF7D00", cmd:"M25.7,99.3c4.3,4.7,9.5,8.6,15.3,11.3l-1.4,3.8c-6.9-2.4-13.2-6.1-18.6-10.8L25.7,99.3z" }, 
    { color:"#F4A300", cmd:"M23.7,97c-5.2-6.4-8.8-14-10.3-22.4L2.9,75.7c2.9,10,8.5,18.9,15.8,25.9L23.7,97z" }, 
    { color:"#F7BC00", cmd:"M13,71.5c-0.2-2-0.4-4-0.4-6c0-10.7,3.4-20.6,9.2-28.8L9.4,28.3c-5.6,9-8.9,19.6-8.9,30.9 c0,4.6,0.6,9.1,1.6,13.5L13,71.5z" }, 
    { color:"#FFCF36", cmd:"M63,15.7V0.8c-1-0.1-2.5-0.1-3.7-0.1c-19.9,0-37.5,9.9-48.1,25l12.7,8.6C33.1,23,46,15.7,63,15.7z" } 
]; 

Sau đó, bạn cần một sản phẩm nào <svg> và có lẽ một <g> bên trong nó, vào đó để vẽ đồ họa:

var svg = d3.select("body").append("svg") 
    .attr("width", 125) 
    .attr("height", 125); 

var gauge = svg.append("g"); 

Sau đó, bạn sử dụng D3 ràng buộc để tạo ra các phân đoạn:

var segments = gauge.selectAll(".segment") 
    .data(segmentData); 
segments.enter() 
    .append("path") 
    .attr("fill", function(d) { return d.color; }) 
    .attr("d", function(d) { return d.cmd; }); 

này chỉ tạo ra gr aphic, nhưng không tô màu nó dựa trên giá trị số nguyên. Cho rằng, bạn có thể xác định một update chức năng:

function update(value) { 
    segments 
     .transition() 
     .attr("fill", function(d, i) { 
      return i < value ? d.color : "#ccc"; 
     }) 
} 

Calling update(4) sẽ tô màu tất cả ngoại trừ phân khúc cuối cùng. Gọi số update(0) không màu (để tất cả màu xám).

Trong fiddle, cũng có chức năng tick() gọi update với giá trị mới trên cơ sở setTimeout, nhưng đó chỉ là bản demo.

Cuối cùng, nếu bạn muốn, bạn có thể bọc tất cả những mã tăng và tạo ra một thành phần tái sử dụng bằng cách làm theo những lời khuyên trong [bài viết này]. (http://bost.ocks.org/mike/chart/)

Answer 2

vì nó là bức tranh tương đối đơn giản, tôi muốn sử dụng một sprite, với 5 biến thể. Điều đó sẽ dễ dàng hơn nhiều so với việc sử dụng d3 và cho kết quả tương tự. (bạn có thể sử dụng một số công cụ trực tuyến như http://spritepad.wearekiss.com/)

Answer 3

Nếu bạn muốn bắt chước hình ảnh tiến trình duolingo, bạn chỉ cần sao chép giải pháp của mình bằng hình ảnh của riêng mình. Họ đang sử dụng sprites như thế này: http://d7mj4aqfscim2.cloudfront.net/images/skill-strength-sprite2.svg không phải là cách tiếp cận d3.js. Điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian và công sức.