實現復雜圓圖（d3.js？）的最佳方法是什么？
[英]What is the best way to implement the complex circular charts (d3.js?)
問題描述
我正在嘗試實現這樣的圖表
我想知道id d3.js庫將允許我繪制這種圖形。
任何幫助，將不勝感激。
2 個解決方案
解決方案1
1 2014-04-10 21:59:00
不需要庫， Canvas可以繪制圖形，設置動畫，縮放比例或任何您可能很需要的東西。 電弧法特別重要。
ctx.beginPath();
//Start the arc at 90 degrees, aka the bottom.
//End the arc at 360 - (360 degrees * 46% expressed as 0.46) + our starting 90 degrees.
//Pi/180 converts degrees to radians.
ctx.arc(64,64,32,284.4*(Math.PI/180),90*(Math.PI/180));
ctx.lineWidth=8;
ctx.strokeStyle="green"
ctx.stroke();
解決方案2
1 2018-01-09 22:04:31
如果有人仍在尋找這個，這就是全部。 只需使用HTML 5 canvas標簽並使用其2D上下文進行繪制即可。 繪圖部分在JS中。
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 1.5 * Math.PI, .5 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="green"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 42, 1.5 * Math.PI, .7 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="blue"; ctx.stroke(); ctx.beginPath(); ctx.arc(100, 75, 34, 1.5 * Math.PI, .6 * Math.PI, false); ctx.lineWidth=8; ctx.strokeStyle="red"; ctx.stroke();
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> </body> </html>
有沒有辦法用 D3.js 修改 Vega 圖表？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.