改變文本的顏色，或將其顯示在路徑的頂部，這樣路徑就不會覆寫它。 -有解無憂

我是D3js的新手，我這里有一些錯誤。當資料的百分比很低時，從邏輯上講，路徑也會顯得更短。但這也 "隱藏 "了我顯示資料百分比的文本。有什么辦法可以讓我的文本變成白色，或者至少讓它出現在它的路徑之上？這是我的代碼片段。謝謝你的幫助

。

 var data = [
        {"平臺"。"是", "百分比": 87.00}, //skyblue.
        {"平臺": "No", " percentage": 1.00}, /darkblue.
        {"平臺": "N/A", " percentage": 17.00}。/orange。
    ];
    
    var svgWidth = 200, svgHeight = 200, radius = Math. min(svgWidth, svgHeight) / 2。
    var svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight) 。
    
    //Create group element to hold pie chart var g = svg.append("g"/span>)
        .attr("transform", "translate("   radius   ")") 。
    
    var color = d3.scaleOrdinal(d3.schemeCategory20) 。
    
    var pie = d3.pie().value（function（d）{ 
         return d.percentage。
    });
    
    var path = d3.arc()
        .outerRadius(80)
        .innerRadius（40）。
     
    var arc = g.selectAll("arc"/span>)
        .data(pie(data))
        .enter()
        .append("g"/span>)。
    
    .append("path")
        .attr("d"/span>, path)
        . attr("fill", function(d) { return color(d. data.percentage）； })。
            
    var label = d3.arc()
        .outerRadius(20)
        .innerRadius（100）。
                
    .append("text"/span>)
        .attr("transform"/span>, function(d) { 
            return "translate("   label.centroid(d)   ") "。
        })
        .attr("text-anchor", "mid")
        .text(function(d) { return  d。 data.percentage "%"; });

 .cnt-main-container.
            {
                display:flex;
                flex-direction: column;
            }
            .charts{
                display:flex;
                justify-content: center;
                flex-direction: 行。
                flex-wrap: nowrap;
            }
            .info{
                display:flex;
                justify-content: center;
                flex-direction: row;
            }

            #dot1{
                width:10px;
                height:10px;
                background:rgb（39, 81, 194）。
                display: inline-block;
            }
            label{
                margin-left:3px;
                margin-top:-3px;
                margin-right:5px;
            }
            #dot2{
                width: 10px;
                height:10px;
                background:rgb（233, 106, 3）。
                display: inline-block;
            }

            #dot3{
                background-color:skyblue;
                width:10px;
                height:10px;
                display: inline-block;
            }

 < div class="cnt-main-container"/span>>
            <div class="charts">/span>
                <svg class="pie-chart"/span>> </svg>>
            </div>/span>
            <div class="info"> 
                <div id="dot1"/span>> </div>>
                <label for="dot1"/span>> 是的</label>
                <div id="dot2"/span>> </div>>
                <label for="dot2"/span>> No</label>/span>
                <div id="dot3"/span>> </div>>
                <label for="dot3"/span>> N/A</label> 
            </div>/span>
    </div>/span>
    
            <script src="https://d3js. org/d3.v4.min.js"></script>
        <script src="script。 js"></script>

uj5u.com熱心網友回復：

在SVG中，元素的順序定義了繪畫順序。因此，簡單的解決方案是對你的輸入選擇進行排序，這樣小的片子就會在上面：

.sort((a, b) => /span> b. data.percentage - a.data.percentage）。)

另外，如果瀏覽器支持paint-order，你可以給文本設定一個小的白色筆劃。

下面是結果：

顯示代碼片段

var data = [{
    "平臺"。"Yes",
    "百分比": 87.00。
  }, //skyblue: 87.00.
  {
    "平臺": "No",
    "百分比": 1.00。
  }, /darkblue: 1.00.
  {
    "平臺": "N/A",
    "百分比": 17.00。
  } /span>橙色
];

var svgWidth = 200,
  svgHeight = 200,
  radius = Math.min(svgWidth, svgHeight) / 2。
var svg = d3.select('svg')
  .attr("width", svgWidth)
  .attr("height", svgHeight) 。

//Create group element to hold pie chart var g = svg.append("g"/span>)
  .attr("transform", "translate("   radius   ")")。

var color = d3.scaleOrdinal(d3.schemeCategory20) 。

var pie = d3.pie().value（function（d） {
  return d.percentage;
});

var path = d3.arc()
  .outerRadius(80)
  .innerRadius（40）。

var arc = g.selectAll("arc"/span>)
  .data(pie(data))
  .enter()
  .append("g"/span>)
  .sort((a, b) => b.data。 percentage - a.data.percentage）。)

arc.append("path"/span>)
  .attr("d"/span>, path)
  .attr("fill"/span>, function(d) {
    return color（d.data.percentage）。
  });

var label = d3.arc()
  .outerRadius(20)
  .innerRadius（100）。

.append("text"/span>)
  .attr("transform", function(d) {
    return "translate("   label.centroid(d)   ") "。
  })
  .attr("text-anchor", "mid")
  .text(function(d) {
    return  d.data.percentage   "%"/span>;
  });

.cnt-main-container {
  display: flex;
  flex-direction: column;
}

.charts {
  display: flex;
  justify-content: center;
  flex-direction: 行。
  flex-wrap: nowrap;
}

.info {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

#dot1 {
  width: 10px;
  height: 10px;
  background: rgb（39, 81, 194）。
  display: inline-block;
}

label {
  margin-left: 3px;
  margin-top: -3px;
  margin-right: 5px;
}

#dot2 {
  width: 10px;
  height: 10px;
  background: rgb（233, 106, 3）。
  display: inline-block;
}

#dot3 {
  background-color: skyblue;
  width: 10px;
  height: 10px;
  display: inline-block;
}

text {
  行程：白色。
  stroke-width: 2px;
  paint-order: stroke;
}

< div class="cnt-main-container"/span>>
  <div class="charts">/span>
    <svg class="pie-chart"/span>> </svg>>
  </div>/span>
  <div class="info"> 
    <div id="dot1"/span>> </div>>
    <label for="dot1"/span>> 是的</label>
    <div id="dot2"/span>> </div>>
    <label for="dot2"/span>> No</label>/span>
    <div id="dot3"/span>> </div>>
    <label for="dot3"/span>> N/A</label> 
  </div>/span>
</div>/span>

<script src="https://d3js. org/d3.v4.min.js"></script>
<script src="script。 js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/320115.html

標籤：

上一篇：實作對另一個介面的依賴性

下一篇：防止svg從視頻播放器上滑落