多级 D3 Pie/Donut-chart 不显示且无错误消息

Question

我正在尝试获得多级 pie/donut-chart。数据没有数值，应该均匀分布在环中。因此，我给了他们所有相同的号码。也许有更优雅的方法，但在简单的数据集中它起作用了。遗憾的是，现在我采用了一个与我的最终目标更相似的数据集，但它停止了工作。我是一个该死的 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 时可能会有点费脑筋，别担心！

我更改了一些小东西以使您的代码在下面的 'all combined' html 中工作。其中一些看起来像是您在调试时可能出现的错误，而另一些则更多地与理解有关。我认为关键位是：

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

希望这能给您一些指导，这就是我如何最终将您的代码混搭成可以在屏幕上显示内容的方式，尽管您可能想要对颜色进行排序！注意：我只是简单地说所有数据访问器只是 return 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>

多级 D3 Pie/Donut-chart 不显示且无错误消息

Multilevel D3 Pie/Donut-chart doesnt show and no error messages

javascript

data-visualization

d3.js

pie-chart

donut-chart