环图中圆弧的扫掠方向

Question

我正在尝试创建一个弧形图，其中弧形代表时间戳的开始和结束。

我的问题是，当开始变量大于结束值时（例如14:00-5:00），弧线会反转方向并逆时针绘制。这是源代码更改的结果，如下所示： https://github.com/mbostock/d3/commit/2dc51055b4aa85496ceb12363f492ad0ad697780

我是 d3.js 的初学者/中级，如果有人能帮助我展示如何禁用此功能，以便我的弧线始终从开始到结束顺时针绘制，那就太棒了。

谢谢！ -萨姆

Answer 1

我通过制作两条弧解决了这个问题。第一个是从起点到 2Pi，第二个是从零到终点。

在此之前，我添加了检查起始角度 > 结束角度。

Answer 2

我今天也遇到了同样的问题，但是解决方案是基于@ABJ的方法。

我比较了起始角度>结束角度。

解决方案在这里

svg.attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', `translate(${width / 2},${height / 2})`);

    svg.select('g')
      .selectAll('.arc')
      .data(pieData)
      .enter()
      .append('g')
      .attr('class', 'arc')
      .each(function(d) {
        const arcStart = timeScale(d.data.start.getTime() % totalTime);
        const arcEnd = timeScale(d.data.end.getTime() % totalTime);
    
        const startAngle = Math.min(arcStart, arcEnd);
        const endAngle = Math.max(arcStart, arcEnd);
    
        const isClockwise = arcEnd >= arcStart;

        const arcGenerator = d3.arc()
        .innerRadius(radius - 30)
        .outerRadius(radius - 10)
        .cornerRadius(8) // Set the corner radius to 8px (adjust as needed);
    
        let arcPath; // Create a path for the arc
    
        if (isClockwise) {
          arcPath = arcGenerator({
            startAngle,
            endAngle,
          }) + 'L' + arcGenerator({
            startAngle: endAngle,
            endAngle: startAngle,
          }) + 'Z';
        } else {
          arcPath = arcGenerator({
            startAngle: endAngle,
            endAngle: startAngle + Math.PI * 2,
          }) + 'L' + arcGenerator({
            startAngle: startAngle + Math.PI * 2,
            endAngle: endAngle + Math.PI * 2,
          }) + 'Z';
        }
    
        d3.select(this).append('path')
          .attr('d', arcPath)
          .attr('fill', '#845ec2')
          .attr('stroke', '#845ec2')
          .attr('stroke-width', 0.1);
      });