1

我想制作一个基于 d3plus 库的饼图。我尝试使用以下代码（但我有一个问题，d3plus.Pie 不是构造函数）

<html>
    <head>
        <title>D3Plus</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.full.js"></script>
    </head>
    <body>


        <script>
            var myData = [
              {"Group": "Store", "Sub-Group": "Convenience Store", "Number of Food Stores": 100},
              {"Group": "Store", "Sub-Group": "Grocery Store", "Number of Food Stores": 150},
              {"Group": "Store", "Sub-Group": "Farmer's Market", "Number of Food Stores": 50},
              {"Group": "Store", "Sub-Group": "Supercenters", "Number of Food Stores": 30},
              {"Group": "Restaurant", "Sub-Group": "Fast-Food Restaurant", "Number of Food Stores": 60},
              {"Group": "Restaurant", "Sub-Group": "Full-Service Restaurant", "Number of Food Stores": 120}
            ];

            new d3plus.Pie()
              .config({
                data: myData,
                groupBy: ["Group", "Sub-Group"],
                value: function(d) {
                  return d["Number of Food Stores"];
                }
              })
              .render();
        </script>
    </body>
</html>
4

1 回答 1

1

似乎您需要不同的来源，包括层次结构

https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"


<html>
    <head>
        <title>D3Plus</title>
  
        <script type="text/javascript" src="https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"></script>
    </head>
    <body>


        <script>
            var myData = [
              {"Group": "Store", "Sub-Group": "Convenience Store", "Number of Food Stores": 100},
              {"Group": "Store", "Sub-Group": "Grocery Store", "Number of Food Stores": 150},
              {"Group": "Store", "Sub-Group": "Farmer's Market", "Number of Food Stores": 50},
              {"Group": "Store", "Sub-Group": "Supercenters", "Number of Food Stores": 30},
              {"Group": "Restaurant", "Sub-Group": "Fast-Food Restaurant", "Number of Food Stores": 60},
              {"Group": "Restaurant", "Sub-Group": "Full-Service Restaurant", "Number of Food Stores": 120}
            ];
            new d3plus.Pie()
              .config({
                data: myData,
                groupBy: ["Group", "Sub-Group"],
                value: function(d) {
                  return d["Number of Food Stores"];
                }
              })
              .render();
        </script>
    </body>
</html>

d3plus 模块列表可以在 https://github.com/d3plus找到

于 2020-05-29T21:17:35.987 回答