如何創建僅在每個段的一端帶有圓形邊緣的圓環圖？

我正在嘗試構建一個僅在一側具有圓形邊緣的甜甜圈圖。我的問題是我的兩邊都是圓形的，而不僅僅是一側。也無法弄清楚如何做更多的前景弧線而不僅僅是一個。

    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
    const arc = d3.arc()
        .innerRadius(80)
        .outerRadius(100)
        .startAngle(0)
        .cornerRadius(15);
    const svg = d3.select("svg"),
        width =  svg.attr("width"),
        height =  svg.attr("height"),
        g = svg.append("g").attr("transform", "translate("   width / 2   ","   height / 2   ")");

背景弧，但我不確定這是否需要？

const background = g.append("path")
        .datum({endAngle: tau})
        .style("fill", "#ddd")
        .attr("d", arc);

    const data = [ .51];
    const c = d3.scaleThreshold()
          .domain([.200,.205,.300,.310, .501, 1])
          .range(["green","#ddd", "orange","#ddd", "red"]);
    Const pie = d3.pie()
          .sort(null)
          .value(function(d) {
            return d;
          });

只有一個前景，但需要能夠有多個：

 const  foreground = g.selectAll('.arc')
        .data(pie(data))
        .enter()
        .append("path")
        .attr("class", "arc")
        .datum({endAngle: 3.8})
        .style("fill", function(d) {
            return c(d.value);
          })
        .attr("d", arc)

我究竟做錯了什么？

var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.arc()
    .innerRadius(80)
    .outerRadius(100)
    .startAngle(0)
    .cornerRadius(15);

// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don’t need to position arcs individually.
var svg = d3.select("svg"),
    width =  svg.attr("width"),
    height =  svg.attr("height"),
    g = svg.append("g").attr("transform", "translate("   width / 2   ","   height / 2   ")");

// Add the background arc, from 0 to 100% (tau).
var background = g.append("path")
    .datum({endAngle: tau})
    .style("fill", "#ddd")
    .attr("d", arc);

var data = [ .51];
var c = d3.scaleThreshold()
      .domain([.200,.205,.300,.310, .501, 1])
      .range(["green","#ddd", "orange","#ddd", "red"]);
var pie = d3.pie()
      .sort(null)
      .value(function(d) {
        return d;
      });
// Add the foreground arc in orange, currently showing 12.7%.
var foreground = g.selectAll('.arc')
    .data(pie(data))
    .enter()
    .append("path")
    .attr("class", "arc")
    .datum({endAngle: 3.8})
    .style("fill", function(d) {
        return c(d.value);
      })
    .attr("d", arc)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="960" height="500"></svg>

uj5u.com熱心網友回復：

檔案指出，圓角半徑應用于圓弧的兩端。此外，您希望弧重疊，但事實并非如此。

您可以通過以下方式添加單邊圓角：

1. arc對資料使用沒有圓角半徑的圓弧。
2. 僅為圓角添加其他path物件。corner這些需要轉移到每個arc.
3. 由于corner兩邊都有圓角，添加一個clipPath夾住該弧線的一半。clipPath包含一個pathfor each corner。這對于小于圓角長度兩倍的圓弧是必不可少的。
4. raise的所有元素corner到前面，然后sort按索引降序，以便它們以正確的方式重疊。

const arc = d3.arc()
    .innerRadius(50)
    .outerRadius(70);
const arc_corner = d3.arc()
    .innerRadius(50)
    .outerRadius(70)
    .cornerRadius(10);

const svg = d3.select("svg"),
    width =  svg.attr("width"),
    height =  svg.attr("height"),
    g = svg.append("g").attr("transform", "translate("   width / 2   ","   height / 2   ")");

const clipPath = g.append("clipPath")
  .attr("id", "clip_corners");

const c = d3.scaleQuantile()
  .range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"]);

const pie = d3.pie().value(d => d);

function render(values) {
  c.domain(values);
  const arcs = pie(values);
  const corners = pie(values).map(d => {
    d.startAngle = d.endAngle - 0.2;
    d.endAngle = d.endAngle   0.2;
    return d;
  });
  const clip = pie(values).map(d => {
    d.startAngle = d.endAngle - 0.01;
    d.endAngle = d.endAngle   0.2;
    return d;
  });

  g.selectAll(".arc")
      .data(arcs)
      .join("path")
        .attr("class", "arc")
        .style("fill", d => c(d.value))
        .attr("d", arc);

  clipPath.selectAll("path")
    .data(clip)
    .join("path")
      .attr("d", arc);

  g.selectAll(".corner")
    .data(corners)
    .join("path")
      .raise()
      .attr("class", "corner")
      .attr("clip-path", "url(#clip_corner)")
      .style("fill", d => c(d.value))
      .attr("d", arc_corner)
      .sort((a, b) => b.index - a.index);
}

function randomData() {
  const num = Math.ceil(8 * Math.random())   2;
  const values = Array(num).fill(0).map(d => Math.random());
  render(values);
}

d3.select("#random_data")
  .on("click", randomData);

 randomData();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<button id="random_data">
Random data
</button>
<svg width="150" height="150"></svg>

I changed the dependency to the current version of d3.

標籤：javascript d3.js 数据可视化 饼形图

上一篇：RnetworkD3sankey-為節點標簽添加值

下一篇：浮點雙精度常量被視為擴展