假設我們想要制作一個類似串列的視覺效果。為圓圈設定 y 邏輯可以很簡單：
var data = [0,1,2,3,4,5,6,7,8,9];
var yScale = d3.scaleLinear()
.range([height,0])
.domain([0,9]);
svg.selectAll(null)
.data(data)
.enter()
.append('circle')
.attr('cy', function(d) { return yScale(d) })
.attr('cx', 100)
.attr('r', 10)
.style('fill', "#a6a6a6");
然而，假設我們想要尋找一些風格點，而不是按塊狀/表格排列，而是將它們排列成圓形或圓弧。我想到了這個結果（只關心外圈）：
雖然我認為 d3 確實具有三角函式，但我從未見過它們在像素坐標中使用過。我想偽代碼是這樣的：
var semiCircleScale = d3.?????
.range([250 degrees, 110 degrees])
.domain([0,9]);
svg.selectAll(null)
.data(data)
.enter()
.append('circle')
.attr('cy', function(d) { return semiCircleScale(d) })
.attr('cx', 100)
.attr('r', 10)
.style('fill', "#a6a6a6");
題
有沒有人熟悉使用圓/弧刻度與 x,y 邏輯一起使用來附加形狀？還是有一種更簡單/更少數學密集度的方法？
uj5u.com熱心網友回復：
所以這個想法是創建兩條不同的圓弧路徑，然后計算周長并將圓放在一起。
d3.svg.arc()
.append("path")
.attr("d", arc1)
這是一個帶有最少代碼的小提琴鏈接來建立這個想法 https://jsfiddle.net/Dibyanshu/g03p6sxj/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427193.html
標籤：javascript d3.js