D3.js数字从内轮螺旋向外

fzsnzjdm  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(122)

我在d3库中创建了嵌套的wheel。我不知道如何在wheel中添加文本,从里到外呈螺旋状。数字的起始点并不重要,数字必须根据之前的位置呈螺旋状向外。

代码

let allAxis = (data.map(function(i, j) {
    return i.name
  })),
  total = allAxis.length,
  radius = Math.min(options.width / 2, options.height / 2),
  angleSlice = Math.PI * 2 / total,
  Format = d3.format('');

let rScale = d3.scale.linear()
  .domain([0, options.circles.maxValue])
  .range([50, radius]);

let svg = d3.select("body").append("svg")
  .attr("width", options.width + options.margins.left + options.margins.right)
  .attr("height", options.height + options.margins.top + options.margins.bottom);

let g = svg.append("g")
  .attr("transform", "translate(" + (options.width / 2 + options.margins.left) + "," + (options.height / 2 + options.margins.top) + ")");

let axisGrid = g.append("g")
  .attr("class", "axisWraper");

let axis = axisGrid.selectAll(".axis")
  .data(allAxis)
  .enter()
  .append("g")
  .attr("class", "axis")

//append them lines
axis.append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", function(d, i) {
    let tempX2 = radius * Math.cos(angleSlice * i - Math.PI / 2);
    return tempX2;
  })
  .attr("y2", function(d, i) {

    let tempY = radius * Math.sin(angleSlice * i - Math.PI / 2);
    return tempY;
  })
  .attr("class", "line")
  .attr("stroke", "black")
  .attr("fill", "none");

//Draw background circles
axisGrid.selectAll(".levels")
  .data([12,11,10,9,8,7,6, 5, 4, 3, 2, 1])
  .enter()
  .append("circle")
  .attr("class", function(d, i) {
    return `gridCircle-${d}`
  })
  .attr("r", function(d, i) {
    return parseInt(radius / options.circles.levels * d, 10);
  })
  .attr("stroke", "black")
  .attr("fill-opacity", function(d, i) {
    return options.circles.opacity;
  });

axisGrid.select(".gridCircle-1").attr("fill-opacity", 1);
axisGrid.select(".gridCircle-2").attr("fill-opacity", 1);

预期结果

已更新#1(带有点径向)

小提琴是这样的:http://jsfiddle.net/arcanabliss/8yjacdoz/73/

bjp0bcyl

bjp0bcyl1#

您需要pointRadial
返回以弧度表示的给定Angular 的点[x,y],0位于-y(12点钟方向),顺时针方向为正Angular ,半径为给定半径。
您可以根据您的排列方式来调整以下示例,例如,为了从3点钟位置开始逆时针旋转等,您只需要调整degreesradius

const degrees = (i % numbersPerRing) * (360 / numbersPerRing);
const radius = (Math.floor(i / numbersPerRing) + 1) * ringSize;

第一个

相关问题