个人中心
gpt4 book ai didi

d3.js - 如何外部化我的 d3 v4 饼图标签？

转载 作者：行者123 更新时间：2023-12-02 09:17:03 26 4
gpt4 key购买 nike

我正在使用 d3 v4。我想将表格移出我的饼图并让它们指向饼图(因为对于小楔子无法读取标签)。我以为这会添加外部标签

// Now we'll draw our label lines, etc.
enteringLabels = labels.selectAll(".label").data(data).enter();
labelGroups = enteringLabels.append("g").attr("class", "label");
labelGroups.append("circle").attr({
    x: 0,
    y: 0,
    r: 2,
    fill: "#000",
    transform: function (d, i) {
        centroid = pied_arc.centroid(d);
        return "translate(" + pied_arc.centroid(d) + ")";
    },
        'class': "label-circle"
});

但标签没有出现在外部 -- https://jsfiddle.net/2df75xj0/1/ .我还需要做什么来外部化标签？

最佳答案 

var svg = d3.select("svg"),
    width = +500,
    height = +200,
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var labels = d3.select("#labels");

var color = d3.scaleOrdinal(["#98abc5", 
			     "#8a89a6", 
			     "#7b6888", 
			     "#6b486b", 
			     "#a05d56", 
			     "#d0743c", 
			     "#ff8c00",
			     "#e34d01",
			     "#ccff05",
			     "#3e7eca",
			     "#aa0092",
			     "#b32e4f"]);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.market_cap; });

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var outerArc = d3.arc()
	    .innerRadius(radius * 0.9)
	    .outerRadius(radius * 0.9);
 
      
var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var csvData = "currency,market_cap\n";
csvData += "Ethereum,28479743440\n"; 
csvData += "Ripple,8082383399\n"; 
csvData += "Bitcoin Cash,8767760760\n"; 
csvData += "Litecoin,3642098421\n"; 
csvData += "NEM,2514744000\n"; 
csvData += "Dash,2363329943\n"; 
csvData += "IOTA,1706859515\n"; 
csvData += "Ethereum Classic,1539824432\n"; 
csvData += "NEO,1138990000\n"; 
csvData += "Monero,1761024916\n"; 
csvData += "Stratis,569824176\n"; 
csvData += "Bitcoin,70807286162\n"; 
var data = d3.csvParse(csvData);
data.forEach(function(d) {
  d.market_cap = +d.market_cap;
  return d;
}); 

  var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

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



// Now we'll draw our label lines, etc.

   
//--------------------------------------------

    arc.append("text")
      
      .attr("transform", function(d,i){
        var pos = outerArc.centroid(d);
        pos[0] = radius * (midAngle(d) < Math.PI ? 1.1 : -1.1);
        
    
  var percent = (d.endAngle - d.startAngle)/(2*Math.PI)*100
       if(percent<3){
       //console.log(percent)
       pos[1] += i*15
       }
        return "translate("+ pos +")";
      })
      .text(function(d) { return d.data.currency; })
      .attr("fill", function(d,i) { return color(i); })
      .attr("text-anchor", 'left')
      .attr("dx", function(d){
      var ac = midAngle(d) < Math.PI ? 0:-50
              return ac
      })
      .attr("dy", 5 )
      
      
     function midAngle(d) {
      return d.startAngle + (d.endAngle - d.startAngle) / 2;
    }

    var polyline = g.selectAll("polyline")
      .data(pie(data), function(d) {
        return d.data.currency;
      })
      .enter()
      .append("polyline")
      .attr("points", function(d,i) {
        var pos = outerArc.centroid(d);
            pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
         var o=   outerArc.centroid(d)
 var percent = (d.endAngle -d.startAngle)/(2*Math.PI)*100
       if(percent<3){
       //console.log(percent)
       o[1] 
       pos[1] += i*15
       }
       //return [label.centroid(d),[o[0],0[1]] , pos];
        return [label.centroid(d),[o[0],pos[1]] , pos];
      })
      .style("fill", "none")
      //.attr('stroke','grey')
      .attr("stroke", function(d,i) { return color(i); })
      .style("stroke-width", "1px");
<!DOCTYPE html>
<html>


<head>

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

</head>

<svg width="700" height="400">
	<g id="labels" />
</svg>

</html>

关于d3.js - 如何外部化我的 d3 v4 饼图标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46060170/

26 4 0
文章推荐： scala - 专门集合中的 AnyVal 元素是否需要装箱？
文章推荐： compilation - CLJS : Hardcode the compilation date at compilation time
文章推荐： c - 如何多次使用 strchr() 查找第 n 次出现
文章推荐： c - 我应该在 Visual Studio 中强制转换 void** return 吗
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com