更改文本颜色或将其显示在路径顶部，这样路径就不会覆盖它

Question

我是 D3js 的新手，这里有一些错误。当数据百分比很低时，逻辑上路径也会显得更短。但这也“隐藏”了我显示数据百分比的文本。有没有什么办法可以让我的文字变白或者至少让它出现在它的路径之上？这是我的代码片段。提前谢谢你

    var data = [
        {"platform": "Yes", "percentage": 87.00}, //skyblue
        {"platform": "No", "percentage": 1.00},    //darkblue
        {"platform": "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")
        .attr("transform", "translate(" + radius + "," + 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")
        .data(pie(data))
        .enter()
        .append("g");
    
    arc.append("path")
        .attr("d", path)
        .attr("fill", function(d) { return color(d.data.percentage); });
            
    var label = d3.arc()
        .outerRadius(20)
        .innerRadius(100);
                
    arc.append("text")
        .attr("transform", function(d) { 
            return "translate(" + label.centroid(d) + ")"; 
        })
        .attr("text-anchor", "middle")
        .text(function(d) { return +d.data.percentage+"%"; });

            .cnt-main-container
            {
                display:flex;
                flex-direction: column;
            }
            .charts{
                display:flex;
                justify-content: center;
                flex-direction: row;
                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">
            <div class="charts">
                <svg class="pie-chart"></svg>
            </div>
            <div class="info">
                <div id="dot1"></div>
                <label for="dot1">Yes</label>
                <div id="dot2"></div>
                <label for="dot2">No</label>
                <div id="dot3"></div>
                <label for="dot3">N/A</label>
            </div>
    </div>
    
            <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="script.js"></script>

Answer 1

在 SVG 中，元素的顺序定义了绘制顺序。因此，最简单的解决方案是对您的输入选择进行排序，这样小的切片将位于顶部：

.sort((a, b) => b.data.percentage - a.data.percentage);

此外，如果浏览器支持paint-order。

，您还可以为文本设置一个小的白色描边。

结果如下：

var data = [{
    "platform": "Yes",
    "percentage": 87.00
  }, //skyblue
  {
    "platform": "No",
    "percentage": 1.00
  }, //darkblue
  {
    "platform": "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")
  .attr("transform", "translate(" + radius + "," + 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")
  .data(pie(data))
  .enter()
  .append("g")
  .sort((a, b) => b.data.percentage - a.data.percentage);

arc.append("path")
  .attr("d", path)
  .attr("fill", function(d) {
    return color(d.data.percentage);
  });

var label = d3.arc()
  .outerRadius(20)
  .innerRadius(100);

arc.append("text")
  .attr("transform", function(d) {
    return "translate(" + label.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) {
    return +d.data.percentage + "%";
  });

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

.charts {
  display: flex;
  justify-content: center;
  flex-direction: row;
  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: white;
  stroke-width: 2px;
  paint-order: stroke;
}

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

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

更改文本颜色或将其显示在路径顶部，这样路径就不会覆盖它

Change text color or display it on top of the path so the path won't cover it

javascript

svg

data-visualization

d3.js