Question

在我的项目中，我使用d3.js创建一个甜甜圈图。在页面加载时，图表的对应于第一个数据的部分将突出显示。在每个部分上单击时，将相应地突出显示。到目前为止，对我来说还不错。要求是在图表中央显示当前选定部分的百分比，如下所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> D3 Js Example </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>

    <div id="my_dataviz"></div>

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

        var lastSelected = "";
var firstSelected = "";

var width = 450
    height = 450
    margin = 40

var radius = Math.min(width, height) / 2 - margin

var normalArc = d3.arc().outerRadius(radius - 30).innerRadius(radius - 70);
var biggerArc = d3.arc().outerRadius(radius - 80).innerRadius(radius - 10);

var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = {a: 9, b: 20, c:30, d:8, e:12}

var color = d3.scaleOrdinal()
  .domain(data)
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))

  
svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', normalArc)
  .attr('fill', function(d){ return(color(d.data.key)) })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)
  .attr('d', function(d, index) {
        // If this is the first segment make it a wider arc
        if (index === 0) {
            firstSelected = this;
            return biggerArc(d);
        } else {
            return normalArc(d);
        }
    }).on("click", function(d) {
        if (firstSelected) {
            d3.select(firstSelected).attr("d", normalArc)
            firstSelected = false;
        }
        if (lastSelected) {
            d3.select(lastSelected).attr("d", normalArc)
        }
        d3.select(this).attr("d", biggerArc)
        lastSelected = this;
    })
    </script>
</body>
</html>

Answer 1

获取数据总计：

var total = d3.sum(d3.values(data));

设置文本选择：

var centralText = svg.append("text")
    .attr("text-anchor", "middle");

最后，将格式化值传递给该选择：

centralText.text(d3.format(".0%")(d.value / total));

这是您更新的代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> D3 Js Example </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>

  <body>

    <div id="my_dataviz"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
    <script>
      var lastSelected = "";
      var firstSelected = "";

      var width = 450
      height = 450
      margin = 40

      var radius = Math.min(width, height) / 2 - margin

      var normalArc = d3.arc().outerRadius(radius - 30).innerRadius(radius - 70);
      var biggerArc = d3.arc().outerRadius(radius - 80).innerRadius(radius - 10);

      var svg = d3.select("#my_dataviz")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      var data = {
        a: 9,
        b: 20,
        c: 30,
        d: 8,
        e: 12
      };

      var total = d3.sum(d3.values(data));

      var centralText = svg.append("text")
        .attr("font-size", "28px")
        .attr("text-anchor", "middle")
        .text(d3.format(".0%")(data.a / total));

      var color = d3.scaleOrdinal()
        .domain(data)
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

      var pie = d3.pie()
        .value(function(d) {
          return d.value;
        })
      var data_ready = pie(d3.entries(data))


      svg
        .selectAll('whatever')
        .data(data_ready)
        .enter()
        .append('path')
        .attr('d', normalArc)
        .attr('fill', function(d) {
          return (color(d.data.key))
        })
        .attr("stroke", "black")
        .style("stroke-width", "2px")
        .style("opacity", 0.7)
        .attr('d', function(d, index) {
          // If this is the first segment make it a wider arc
          if (index === 0) {
            firstSelected = this;
            return biggerArc(d);
          } else {
            return normalArc(d);
          }
        }).on("click", function(d) {
          centralText.text(d3.format(".0%")(d.value / total))
          if (firstSelected) {
            d3.select(firstSelected).attr("d", normalArc)
            firstSelected = false;
          }
          if (lastSelected) {
            d3.select(lastSelected).attr("d", normalArc)
          }
          d3.select(this).attr("d", biggerArc)
          lastSelected = this;
        })

    </script>
  </body>

</html>

甜甜圈图：显示里面的百分比

1 个答案: