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

Question

I am trying to get a multilevel pie/donut-chart.我正在尝试获得多级饼图/甜甜圈图。 The data doesnt have a numeric value and should be distributed evenly in the rings.数据没有数值，应该均匀分布在环中。 Thus I gave them all the same number.因此，我给了他们所有相同的号码。 Maybe there's a more elegant way but in the simple dataset it worked.也许有一种更优雅的方式，但在简单的数据集中它起作用了。 Sadly now that I took a dataset which is a bit more similar to my endgoal and it stopped working.可悲的是，现在我采用了一个与我的最终目标更相似的数据集，但它停止工作了。 I am a bloody d3 newbie and I would be really grateful for any kind of help what might be wrong as I dont get any error messages.我是一个该死的 d3 新手，如果我没有收到任何错误消息，我会非常感谢任何可能出错的帮助。 Cheers and thanks a lot!干杯，非常感谢！ (I have the script in the html file). （我在 html 文件中有脚本）。 I took this as an inspiration: fiddle我以此为灵感：小提琴

edit: To see my graphic I use a local webserver so I am able to load stuff locally编辑：要查看我的图形，我使用本地网络服务器，因此我可以在本地加载内容

 /* 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 can frazzle the brain a bit when you're new to it, don't worry!当您不熟悉 D3 时，它可能会让您的大脑有些疲惫，别担心！

I changed a few little things to get your code working in the 'all combined' html below.我更改了一些小东西，以使您的代码在下面的“全部组合”html 中工作。 Some of which look like mistakes that might have crept in whilst you were debugging, and some bits that were more about understanding.其中一些看起来像是在您调试时可能出现的错误，而有些则更多地与理解有关。 I think the key bits were:我认为关键是：

Your svg selection d3.select("#duration svg") doesn't actually point to anything in your document so nothing else was actually happening, which is why you were not getting any errors.您的 svg 选择d3.select("#duration svg")实际上并没有指向您文档中的任何内容，因此实际上没有其他任何事情发生，这就是您没有收到任何错误的原因。 This is probably just what I would call a 'facepalm' error as you took the code from that fiddle, if you change it to d3.select("#pie-chart svg") you should start to see some spicier errors!这可能就是我所说的“facepalm”错误，因为您从那个小提琴中获取代码，如果您将其更改为d3.select("#pie-chart svg")您应该开始看到一些更尖锐的错误！ To debug this kind of thing, I always go to the browser debug tools and inspect the document, you will see that there are no <g> elements under your svg, and start homing in on the problem from there为了调试这种事情，我总是去浏览器调试工具检查文档，你会看到你的 svg 下没有<g>元素，然后从那里开始解决问题
Your data is just one object, denoted by being surrounded by a set of curly brackets {} .您的数据只是一个对象，由一组大括号{}包围表示。 This is a weird thing to bind on in d3, we normally bind on an array of objects and do different things based on those data items.在 d3 中绑定是一件很奇怪的事情，我们通常绑定一个对象数组并根据这些数据项做不同的事情。 Sure enough, in the fiddle the objects are the same shape, but it doesn't bind on just the objects (which would have been .data(dataset) , but uses d3.values() to change the shape of the data into an array first with .data(d3.values(dataset))果然，在小提琴中，对象具有相同的形状，但它不仅仅绑定在对象上（本来是.data(dataset) ，而是使用d3.values()将数据的形状更改为数组首先使用.data(d3.values(dataset))
You've jumped the gun a little bit where you've tried to bind to the pie(d) dataset.在尝试绑定到pie(d)数据集的地方，您已经有点过头了。 This example uses two levels of data join (check out https://bost.ocks.org/mike/nest/ when you have plenty of time and tea available!) The top level data join (ie .data(d3.values(dataset)) has one element per 'ring' in your doughnut chart - so each ring has the one <g> element with all that ring's data in it as one object. Then there's another data join ( .data(function(d, i) { return pie(d); }) in the fiddle, and I've done something subtly different below) to create a set of <path> elements in the ring's <g> element, and it's each of those <path> that are a segment of your doughnuts.这个例子使用了两个级别的数据连接（当你有足够的时间和茶可用时，请查看https://bost.ocks.org/mike/nest/ ！）顶级数据连接（即.data(d3.values(dataset))在你的圆环图中每个“环”有一个元素——所以每个环都有一个<g>元素，其中的所有环的数据作为一个对象。然后还有另一个数据连接（ .data(function(d, i) { return pie(d); })在小提琴中，我在下面做了一些微妙的不同）在环的<g>元素中创建一组<path>元素，并且它是每个<path>是甜甜圈的一部分。

Hope that helps give you a few pointers, here's how I ended up mashing your code into something that would put something on the screen, though you'll probably want to sort the colouring out!希望这可以帮助您提供一些指导，这就是我最终将您的代码混合成可以在屏幕上放置某些内容的方法，尽管您可能想要对着色进行排序！ Note: I did simplify things a touch by just saying that all data accessors just return 1 (because in your case you always want evenly segmented rings, and it then doesn't matter what shape each data point is, they all just count as 1)注意：我只是说所有数据访问器都只返回 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 饼图/甜甜圈图不显示，也没有错误消息

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-24 17:53:47

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-24 17:53:47

解决方案1
2 已采纳 2019-11-24 17:53:47