Wie mache ich Rechtecke Bogen/Kurven in d3.js

Question

Ist es möglich, Rechtecke curved oder archedshaped zu machen. Hier ist meine jsfiddlehttps://jsfiddle.net/dibyendu/y8pthz2x/. Ich möchte, diese Rechtecke über Radardiagrammachse Bogen machen/gebogene Verwendung d3

Answer 1

vollständiges Beispiel: https://jsfiddle.net/jrxdbctz/5/

---

Zwischenschritte:
Nur ein arc: https://jsfiddle.net/jrxdbctz/2/

Umkehren x und y für einen anderen Stil: https://jsfiddle.net/jrxdbctz/3/

Bar mit Breite: https://jsfiddle.net/jrxdbctz/4/

---

Beispiel eines Bogens unter Verwendung von Zeichnungs d3.js (angepasst von Rectangle with a bottom arc cut in d3 js):

var data = [3]; 
 
var width = 325, 
 
    height = 430; 
 

 
var svgContainer = d3.select("#yourrank") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
svgContainer.selectAll("path") 
 
    .data(data) 
 
    .enter() 
 
    .append("path") 
 
    .attr("d",function(d) { 
 
    var x0 = 0; 
 
    var x1 = 200; 
 
    var y1 = 50; 
 
    var y2 = 100; 
 
    var k= parseFloat((x0+x1)/2); 
 
    return "M " + x0 +","+y1+" Q "+k+","+ (y1-100) +" " + x1 + ","+y1 
 
    + "L " + x1 +","+y2+" Q "+k+","+ (y2-100) +" " + x0 + ","+y2 
 
    + " Z"; 
 
    }) 
 
    .attr("fill", "#F2135D") 
 
    .attr("stroke", "gray");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="yourrank"></div>

M = moveTo

L = Zeile

Q bedeutet:

Die andere Art der Bezier-Kurve, die Bezier sind ein quadratischer verfügbar ist, Q. Es ist eigentlich eine einfachere Kurve als die kubischen: es nur einen Kontrollpunkt erfordert, was die Neigung bestimmt der Kurve sowohl am Startpunkt als auch am Endpunkt. Es benötigt zwei Argumente: den Kontrollpunkt und den Endpunkt der Kurve.

Weitere Dokumentationen wie MQL arbeitet man http://www.w3schools.com/svg/svg_path.asp https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths