Die Hälfte gefüllter Kreis mit d3.js

Ich versuche zu erstellen, die ein halb gefüllter Kreis mit d3.js wie diese.
Ich finde nicht jedes Beispiel, wie es zu tun.
Wie kann dies gemacht werden mit d3.js?

InformationsquelleAutor baba-dev | 2013-07-07
  1. 11

    Ja, Sie können tun, dass mit einer SVG Farbverlauf. Alles, was Sie tun müssen, ist, es zu definieren und dann verwenden Sie es als Füllung für den Kreis.

    var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
              .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
grad.append("stop").attr("offset", "50%").style("stop-color", "white");

svg.append("circle")
   .attr("fill", "url(#grad)");

    JSfiddle hier.

    • Vielen Dank für die Antwort, das funktioniert Prima. für meinen Zweck brauchte ich auch hinzufügen "stop-opacity" mit 0, weil ich wollte, um die Hälfte des Kreises transparent und nicht weiß. Ich hoffe, es hilft jemand.
    InformationsquelleAutor Lars Kotthoff
  2. 1

    Können Sie nicht einmal, dass d3 für diese einfache Aufgabe. Sie können verwenden Sie diese einfache Technik, Mit Clippath auf einem Kreis, ich habe es geschrieben, details in meinem blog http://anilmaharjan.com.np/blog/2013/11/create-filled-circle-to-visualize-data-using-svg

    Verwenden Sie Zwei Kreise übereinander in einem tag.
    Füllen mit der Farbe, die Sie möchten, und eine andere mit weißer oder können Ihre Hintergrundfarbe, nur um es Aussehen wie seine leere in sich.
    Dann clip die spätere Verwendung mit Rechteck in der es, weisen radius paar pixel weniger, als der frühere Kreis.
    Platz clip-Pfad in der linken oberen .. zuweisen Breite gleich dem Durchmesser des Kreises und die Höhe werden definiert durch Ihre Daten.
    Die Daten werden handeln reversibel, um die Füllung so können Sie subtrahieren Sie die tatsächlichen Daten von Ihrem max. Z.B.: wenn die Daten 20/100 tun 100-20 so u ll 80 auf diese Weise der leere Teil wird 80 und gefüllt werden 20.

    Können Sie wechseln zwischen Höhe und Breite wechseln zwischen vertikaler oder horizontaler Füllung Achse.

    Der HTML sollte so Aussehen.

    <svg height="200"> <a transform="translate(100,100)">
    <g>
      <circle fill="#f60" r="50"></circle>
    </g>
    <g>
      <clippath id="g-clip">
       <rect height="50" id="g-clip-rect" width="100" x="-50" y="-50">
       </rect>
      </clippath>
      <circle clip-path="url(#g-clip)" fill="#fff" r="47"></circle>
    </g>
  </a>
</svg>

    Habe ich einen jsfiddle um dies zu illustrieren, in: http://jsfiddle.net/neqeT/2/

    • Bitte geben Sie einige text, falls Ihr link ändert sich zu einem späteren Zeitpunkt.
    InformationsquelleAutor Anil Maharjan
  3. 0

    erstellen Sie ein div mit der id name id_cirlce und fügen Sie diesen code im script-tag

    <div id="id_circle"></div>

<script>
var svg = d3.select("#id_circle")
         .append("svg")
         .attr("width",250)
         .attr("height",250);

var grad = svg.append("defs")
          .append("linearGradient").attr("id", "grad")
              .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");

        grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
        grad.append("stop").attr("offset", "50%").style("stop-color", "white");

    svg.append("circle")
         .attr("r",50)
         .attr("cx",60)
         .attr("cy",60)
         .style("stroke","black")
         .style("fill","url(#grad)");

</script>
    InformationsquelleAutor Vineesh Kalarickal
Schreibe einen Kommentar