Question

我正在建立一个3D-Js图表，我希望饼图文本在它自己的周围。

这正是我想要的：

我有两个问题：我现在打印两个图表（标签打印在另一个图表中）并使用CSS调整它们。

- 首先我没有弄清楚如何在同一个图表中设置标签，所以我用CSS调整它。

-i没有弄清楚如何设置正确的角度，使标签图表适合第一张图表。

如果有办法，请在同一张图表中打印。

这是我的代码：

＆＃13;

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <div id = "svgContent"></div>

  <script>
    var data = [{label:"BC", value:50},{label:"Alb", value:20},{label:"Mani",value:100},{label:"Sascn", value:80},{label:"ORIO", value:20}];

    var margin = {top:40,left:40,right:40,bottom:40};
    width = 300;
    height = 300;
    radius = Math.min(width-100,height-100)/2;
    var color = d3.scale.category10().range(["#e8af92", "#a9e892"]);
    var arc = d3.svg.arc()  
      .outerRadius(radius -230)
      .innerRadius(radius - 50)
      .cornerRadius(20);
    var arcOver = d3.svg.arc()
    .outerRadius(radius +5000)
    .innerRadius(200);

    var a=width/2 - 20;
    var b=height/2 - 90;
    var svg = d3.select("#svgContent").append("svg")
      .attr("viewBox", "0 0 " + width + " " + height/2)
      .attr("preserveAspectRatio", "xMidYMid meet")
      .append("g")
      .attr("transform","translate("+a+","+b+")");

      var pie = d3.layout.pie()
      .sort(null)
      .value(function(d){return d.value;})
      .padAngle(.4);

    var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter();

    g.append("path")
      .attr("d",arc)
      .style("fill",function(d){return color(d.data.value);})
      .attr("d", arc);


  </script>
<div id="datas" style="margin-top:-580px;margin-left:-10px;">
<script>


    var delta = (2*Math.PI)/5;
    var arc = d3.svg.arc()
      .innerRadius(185)
      .outerRadius(185)
      .startAngle(function(d,i){return (i)*delta;})
      .endAngle(function(d,i){return (i+1)*delta;});

       var svg = d3.select("#datas").append("svg")
      .attr("width", 960)
      .attr("height", 500)
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", "translate(480,250)rotate(00)");

    var thing = svg.append("g")
      .attr("id","thing")
      .style("fill","navy")
      .attr("class", "label");

    var arcs = svg.append("path")
      .attr("id", function(d,i){return "s"+i;})
      .attr("d",arc);

    thing.append("text")
      .style("font-size",10)
      .style("text-anchor","middle")
      .append("textPath")
      .attr("textLength",function(d,i){return d.label.length *8 ;})
      .attr("xlink:href",function(d,i){return "#s"+i;})
      .attr("startOffset",function(d,i){return "130";})
    //  .attr("dy","em")
      .text(function(d){return d.label.toUpperCase();});
</script>
</div>

＆＃13;

Answer 1

您的代码重构了一下：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <div id="svgContent"></div>

  <script>
    var data = [{
      label: "BC",
      value: 50
    }, {
      label: "Alb",
      value: 20
    }, {
      label: "Mani",
      value: 100
    }, {
      label: "Sascn",
      value: 80
    }, {
      label: "ORIO",
      value: 20
    }];

    var margin = {
      top: 40,
      left: 40,
      right: 40,
      bottom: 40
    };
    width = 300;
    height = 300;
    radius = Math.min(width - 100, height - 100) / 2;
    var color = d3.scale.category10().range(["#e8af92", "#a9e892"]);
    var arc = d3.svg.arc()
      .outerRadius(radius - 230)
      .innerRadius(radius - 50)
      .cornerRadius(20);
    var arcOver = d3.svg.arc()
      .outerRadius(radius + 5000)
      .innerRadius(200);

    var a = width / 2 - 20;
    var b = height / 2 - 90;

    var svg = d3.select("#svgContent").append("svg")
      .attr("viewBox", "0 0 " + width + " " + height / 2)
      .attr("preserveAspectRatio", "xMidYMid meet")

    var defs = svg.append("defs");

    svg = svg.append("g")
      .attr("transform", "translate(" + a + "," + b + ")");

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d.value;
      })
      .padAngle(.4);
      
    data = pie(data);
      
    // build out the defs
    defs.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("id", function(d,i){
        return "arc" + i;
      })
      .attr("d", arc);

    // and the arcs
    var g = svg.selectAll(".arc")
      .data(data)
      .enter()
      .append("g");

    g.append("path")
      .style("fill", function(d) {
        return color(d.data.value);
      })
      .attr("d", arc);

    // add the texts
    g.append("text")
      .append("textPath")
      .attr("xlink:href", function(d,i){
        return "#arc" + i;
      })
      .text(function(d){
        return d.data.label;
      })
      .style("font", "8px sans-serif");
      
  </script>

</body>

</html>

＆＃13;

D3.js饼图周围的弯曲文字

1 个答案: