D3: Messdiagramm mit wachsendem Lichtbogen

Question

Ich möchte etwas wie einen wachsenden Lichtbogen erreichen, der 5 Stufen anzeigt (siehe Bild). Meine Daten haben nur einen ganzzahligen Wert zwischen 1-5. Sie können das Symbol in der Mitte für jetzt ignorieren. Gibt es eine Möglichkeit, so etwas in d3 zu erreichen? Ich konnte dafür kein Beispiel finden. Außerdem versuchte ich es mit einem Cut-Off-Pie (Donut) Chart Ansatz, aber ich konnte den wachsenden Bogen nicht machen ... Ich würde jede Hilfe zu schätzen wissen! Dank dafür.

Answer 1

Sie können dies mit d3 ohne Abhängigkeit von externen Bildern, SVG-Sprites oder irgendetwas im DOM tun - nur d3.js.

Hier ist ein working fiddle. Die Implementierung wird nachfolgend erläutert. Aber auch, hier ist eine more advanced Geige, die einen Clip-Pfad über den wachsenden Bogen animiert. Schauen Sie sich its predecessor an, um zu sehen, wie die Maske ohne Clipping aussieht.

Zuerst müssen Sie die Grafiken als ein Array von Daten darstellen, an die Sie mit d3 binden. Insbesondere eine Farbe und eine „Zeilenbefehl“ müssen (die Zeichenfolge zuweisen Sie d wie in <path d="..."> Etwas wie folgt aus:.

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

Dann benötigen Sie eine leere <svg> und wahrscheinlich eine <g> in ihm, in die zu zeichnen die Grafik:

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

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

Dann verwenden Sie d3 Bindung der Segmente zu erstellen:

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

das schafft nur die gr aphic, färbt es jedoch nicht basierend auf einem ganzzahligen Wert.

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

Aufruf update(4) wird Farbe alle bis auf das letzte Segment: Dafür können Sie eine update Funktion definieren. Rufen Sie update(0) Farbe keine (alle grau).

In der Geige gibt es auch eine tick() Funktion, die update mit einem neuen Wert auf einer SetTimeout-Basis aufruft, aber das ist nur für Demo. wenn Sie

Schließlich möchten, können Sie alle, dass Code einpacken und eine wiederverwendbare Komponente erstellen, indem Sie die Hinweise in [diesem Artikel]. (http://bost.ocks.org/mike/chart/)

Answer 2

, da es relativ einfaches Bild ist, würde ich einen Sprit, mit 5 Variationen verwenden. Das wäre viel einfacher als die Verwendung von d3 und ergibt das gleiche Ergebnis. (Sie könnten ein Online-Tool wie http://spritepad.wearekiss.com/ verwenden)

Answer 3

Wenn Sie duolingo Fortschrittsbilder imitieren möchten, können Sie einfach ihre Lösung mit eigenen Bildern kopieren. Sie verwenden Sprites wie dieses: http://d7mj4aqfscim2.cloudfront.net/images/skill-strength-sprite2.svg nicht die d3.js Ansatz. Dies spart Ihnen viel Zeit und Mühe.