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

Question

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

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

/* 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>

标签： javascriptd3.jsdata-visualizationpie-chartdonut-chart

Answer 1

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

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

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