多级 D3 饼图/甜甜圈图不显示，也没有错误消息

Question

我正在尝试获取多级饼图/甜甜圈图。数据没有数值，应均匀分布在环中。因此，我给了他们所有相同的号码。也许有一种更优雅的方式，但在简单的数据集中它有效。可悲的是，现在我采用了一个与我的最终目标更相似的数据集，但它停止了工作。我是一个血腥的 d3 新手，如果我没有收到任何错误消息，我将非常感谢任何可能出现问题的帮助。干杯，非常感谢！ （我在 html 文件中有脚本）。我以此为灵感：fiddle

编辑：要查看我的图形，我使用本地网络服务器，以便能够在本地加载内容

/* Old simple data set
         var dataset = {
          ring0 : [1],  
          ring1: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
          ring2: [1,1,1],
          ring3: [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
          ring4: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        }; */

        var dataset = {
            ring0:[{"Arbeitsbereich":"IT", "number": 1}],
            ring1:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring2:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring3:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring4:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}]
        };

        
       
        var width  = d3.select('#pie-chart').node().offsetWidth,
            height = 600,
            cwidth = 60;
        
        var colorO = '#8a0101';
        var colorA = '#db3131';
        var colorB = '#ff4a4a';
        var colorC = '#aa0000';
        var colorD = '#ff0000';

                        
        var pie = d3.pie()
            .value(function(d){return d.number;});

            console.log(pie(dataset.ring1))

        var svg = d3.select("#duration svg")
            .append("g") //used to group svg elements
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        console.log(dataset);
 
        var arc = d3.arc();

        var gs = svg.selectAll("g").data(pie(dataset)).enter().append("g"); 

        var path = gs.selectAll("path")
            .data(function(d) { return pie(d); }) //.data(function(d, i)
            .enter().append("path")
            .attr("fill", function(d, i, j) {
                switch (j) {
                case 0:
                    return colorO(d.dataset.number);
                    break;
                case 1:
                    return colorA(d.dataset.number);
                    break;
                case 2:
                    return colorB(d.dataset.number);
                    break;
                case 3:
                    return colorC(d.dataset.number);
                    break;
                case 4:
                    return colorD(d.dataset.number);
                } 
            
            })

            .attr("d", function(d, i, j) {
                if (j == 0) {
                    
                    return arc.innerRadius(0).outerRadius(40)(d);
                    
                } else if (j == 1) {
                    
                    return arc.innerRadius(40).outerRadius(cwidth * (j + 1))(d);        

            } else {
                    
                    return arc.innerRadius(cwidth * j).outerRadius(cwidth * (j + 1))(d);
                    
                }        
            });

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px;
  }
  
  text {
    font: 10px sans-serif;
  }
  
  form {
    position: absolute;
    right: 10px;
    top: 10px;
  }

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v5.js"></script>
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <meta charset="utf-8"
</head>
        <body> 
                <div id="pie-chart">
                        <svg style="height:1000px;width:100%"></svg>
                    </div>
        </body>    
</html>

Answer 1

当您刚接触 D3 时，它可能会让您的大脑有些疲倦，别担心！

我更改了一些小东西以使您的代码在下面的“全部组合”html 中运行。其中一些看起来像是在你调试时可能已经出现的错误，还有一些更多是关于理解的。我认为关键是：

• 您的 svg 选择 d3.select("#duration svg") 实际上并没有指向您文档中的任何内容，因此实际上没有发生任何其他事情，这就是您没有收到任何错误的原因。当您从小提琴中获取代码时，这可能就是我所说的“facepalm”错误，如果您将其更改为d3.select("#pie-chart svg")，您应该会开始看到一些更严重的错误！为了调试这种东西，我总是去浏览器调试工具检查文档，你会看到你的 svg 下没有 <g> 元素，然后从那里开始解决问题
• 您的数据只是一个对象，由一组大括号 {} 包围表示。这在 d3 中绑定是一件很奇怪的事情，我们通常绑定一个对象数组并根据这些数据项做不同的事情。果然，在小提琴中，对象的形状相同，但它不仅仅绑定在对象上（本来是.data(dataset)，而是使用d3.values()首先使用@将数据的形状更改为数组987654329@
• 在尝试绑定到pie(d) 数据集的地方，您已经有点过头了。此示例使用两个级别的数据连接（当您有足够的时间和茶时，请查看https://bost.ocks.org/mike/nest/！）顶级数据连接（即.data(d3.values(dataset)) 在您的圆环图中每个“环”都有一个元素 - 所以每个环有一个 <g> 元素，其中包含所有环的数据作为一个对象。然后还有另一个数据连接（.data(function(d, i) { return pie(d); }) 在小提琴中，我在下面做了一些微妙的不同）来创建环的<g> 元素中的一组<path> 元素，每个<path> 都是你甜甜圈的一部分。

希望对您有所帮助，这就是我最终如何将您的代码混搭成可以在屏幕上显示某些内容的方法，尽管您可能想要对颜色进行排序！注意：我确实通过说所有数据访问器只返回 1 来简化事情（因为在您的情况下，您总是想要均匀分段的环，然后每个数据点的形状无关紧要，它们都算作 1 )

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v5.js"></script>
    <style>
    body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px;
  }

  text {
    font: 10px sans-serif;
  }

  form {
    position: absolute;
    right: 10px;
    top: 10px;
  }
    </style>
    <meta charset="utf-8">
</head>
        <body> 
                <div id="pie-chart">
                        <svg style="height:1000px;width:100%"></svg>
                    </div>

                <script>
      /* Old simple data set */
      /* var dataset = {
          ring0:[1],  
          ring1:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
          ring2:[1,1,1],
          ring3:[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
          ring4:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
       }; 
     */


     ///*
     var dataset = {
            ring0:[{"Arbeitsbereich":"IT", "number": 1}],
            ring1:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring2:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring3:[{"Arbeitsbereich":"IT", "number": 1}, {"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}],
            ring4:[{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1},{"Arbeitsbereich":"IT", "number": 1}]
        };



        var width  = d3.select('#pie-chart').node().offsetWidth,
            height = 600,
            cwidth = 60;

        var colorO = '#8a0101';
        var colorA = '#db3131';
        var colorB = '#ff4a4a';
        var colorC = '#aa0000';
        var colorD = '#ff0000';


        var pie = d3.pie().value(function(d){return 1})

        var svg = d3.select("#pie-chart svg")
            .append("g") //used to group svg elements
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var arc = d3.arc();

        var gs = svg.selectAll("g")
          .data(d3.values(dataset)).enter().append("g"); 

        var path = gs
            .selectAll("path")
            .data(function(d,i) {
                return pie(d).map(function(e){e.ringIndex = i; return e});
            })
            .enter()
            .append("path")
            .attr("fill", function(d, i, j) {
                switch (i) {
                case 0:
                    return colorO;
                    break;
                case 1:
                    return colorA;
                    break;
                case 2:
                    return colorB;
                    break;
                case 3:
                    return colorC;
                    break;
                case 4:
                    return colorD;
                } 

            })

            .attr("d", function(d, i, j) {
                return arc.innerRadius(cwidth * d.ringIndex).outerRadius(cwidth * (d.ringIndex + 1))(d);
            });
            </script>

        </body>  
</html>