javascript - 如何使用 d3.shape 创建从晚上 9 点开始到早上 6 点结束的半圆

Question

我正在尝试使用 d3.shape.arc 创建一个圆圈并响应原生艺术

假设圆圈下潜到 12，所以我希望圆圈从 9 点开始到 6 点结束(从晚上 9 点到早上 6 点)

这是我的代码:

const _circle = d3.shape.arc()
    .outerRadius(radius)
    .padAngle(0)
    .startAngle(5)
    .endAngle(3)
    .innerRadius(radius);

圆圈从 5 开始向右移动到 4，我需要它向左移动(像时钟一样)

circle

Answer 1

以这种方式定义您的比例:

var scaleHours = d3.scaleLinear()
  .domain([0, 12])
  .range([0, 2 * Math.PI]);

当你指定你的arc时，你应该这样定义startAngle:

.startAngle(scaleHours(start))

对于 .endAngle 你应该检查你的开始时间是否比结束时间多(9 比 6 多)你应该添加 12 到结束时间值:

function specifyArc(start, end) {
  return d3.arc()
    .startAngle(scaleHours(start))
    .endAngle(scaleHours(end + (start > end ? 12 : 0)))
    .innerRadius(0)
    .outerRadius(radius - 10);
}

检查下面的演示(注意日志):

var radius = 90;

var svg = d3.select('body')
  .append('svg')
	.attr('width', radius * 2)
  .attr('height', radius * 2)
  .append('g')
  .attr('transform', 'translate(' + radius + ', ' + radius + ')');

var scaleHours = d3.scaleLinear()
  .domain([0, 12])
  .range([0, 2 * Math.PI]);
  
var hoursScale = d3.scaleLinear()
	.range([0,330])
	.domain([0,11]);

var ticks = svg.selectAll('.second-tick')
  .data(d3.range(0, 12));
  
ticks.enter()
  .append('line')
  .attr('class', 'second-tick')
  .merge(ticks)
  .attr('x1', 0)
  .attr('x2', 0)
  .attr('y1', radius)
  .attr('y2', radius - 10)
  .attr('transform', function(d) {
    return 'rotate(' + hoursScale(d) + ')';
  });
 

function specifyArc(start, end) {
	return d3.arc()
    .startAngle(scaleHours(start))
    .endAngle(scaleHours(end + (start > end ? 12 : 0)))
    .innerRadius(0)
    .outerRadius(radius - 10);
}

var count = 0;

var timeframes = [
	{ start: 9, end: 6 },
  { start: 6, end: 9 },
];

setInterval(() => {
	var currentTimeFrame = timeframes[count%2];
  
  console.clear();
  console.log('start: ', currentTimeFrame.start, 'end: ', currentTimeFrame.end);
  
	var arc = specifyArc(currentTimeFrame.start, currentTimeFrame.end);
  count++;
  
  svg.select('.arc').remove();
  
  svg.append("path")
  	.attr('class', 'arc')
  	.attr("d", arc)
    .style("fill", 'red');
}, 2500);

.second-tick{
	stroke-width:3;
	fill:#000;
  stroke:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>