使用 d3js 的多环饼图

【问题标题】：multi-ring pie chart using d3js使用 d3js 的多环饼图
【发布时间】：2018-03-30 21:38:23
【问题描述】：

我正在尝试了解如何使用 d3js 创建多环饼图。这是我到目前为止所尝试和得到的。我很确定它在这里没有正确读取数据。关于我应该如何创建这样一个图表的任何示例。我正在尝试做的是根据流行音乐季度等每个组来获得每个戒指。

var dataset = [
  {
    "name": "Population Quater",
    "code": "POP_QUATER",
    "parent": "POP_BY_QUAT",
    "children": [
      {
        "name": "POP_CYQ1",
        "code": "POP_CYQ1",
        "parent": "POP_QUATER",
        "value": "6772",
        "label": "CYQ1",
        "children": []
      },
      {
        "name": "POP_CYQ2",
        "code": "POP_CYQ2",
        "parent": "POP_QUATER",
        "value": "6716",
        "label": "CYQ2",
        "children": []
      },
      {
        "name": "POP_CYQ3",
        "code": "POP_CYQ3",
        "parent": "POP_QUATER",
        "value": "6714",
        "label": "CYQ3",
        "children": []
      },
      {
        "name": "POP_CYQ4",
        "code": "POP_CYQ4",
        "parent": "POP_QUATER",
        "value": "6703",
        "label": "CYQ4",
        "children": []
      },
      {
        "name": "POP_LYQ1",
        "code": "POP_LYQ1",
        "parent": "POP_QUATER",
        "value": "6721",
        "label": "LYQ1",
        "children": []
      },
      {
        "name": "POP_LYQ2",
        "code": "POP_LYQ2",
        "parent": "POP_QUATER",
        "value": "6671",
        "label": "LYQ2",
        "children": []
      },
      {
        "name": "POP_LYQ3",
        "code": "POP_LYQ3",
        "parent": "POP_QUATER",
        "value": "6708",
        "label": "LYQ3",
        "children": []
      },
      {
        "name": "POP_LYQ4",
        "code": "POP_LYQ4",
        "parent": "POP_QUATER",
        "value": "6734",
        "label": "LYQ4",
        "children": []
      }
    ]
  },
  {
    "name": "Transient Pop",
    "code": "TRANSIENT_POP",
    "parent": "POP_BY_QUAT",
    "label": "Transient Pop",
    "children": [
      {
        "name": "TRANSIENT_LYQ1",
        "code": "TRANSIENT_LYQ1",
        "parent": "TRANSIENT_POP",
        "value": "54",
        "label": "LYQ1",
        "children": []
      },
      {
        "name": "TRANSIENT_LYQ2",
        "code": "TRANSIENT_LYQ2",
        "parent": "TRANSIENT_POP",
        "value": "86",
        "label": "LYQ2",
        "children": []
      },
      {
        "name": "TRANSIENT_LYQ3",
        "code": "TRANSIENT_LYQ3",
        "parent": "TRANSIENT_POP",
        "value": "219",
        "label": "LYQ3",
        "children": []
      },
      {
        "name": "TRANSIENT_LYQ4",
        "code": "TRANSIENT_LYQ4",
        "parent": "TRANSIENT_POP",
        "value": "191",
        "label": "LYQ4",
        "children": []
      },
      {
        "name": "TRANSIENT_CYQ1",
        "code": "TRANSIENT_CYQ1",
        "parent": "TRANSIENT_POP",
        "value": "52",
        "label": "CYQ1",
        "children": []
      },
      {
        "name": "TRANSIENT_CYQ2",
        "code": "TRANSIENT_CYQ2",
        "parent": "TRANSIENT_POP",
        "value": "91",
        "label": "CYQ2",
        "children": []
      },
      {
        "name": "TRANSIENT_CYQ3",
        "code": "TRANSIENT_CYQ3",
        "parent": "TRANSIENT_POP",
        "value": "222",
        "label": "CYQ3",
        "children": []
      },
      {
        "name": "TRANSIENT_CYQ4",
        "code": "TRANSIENT_CYQ4",
        "parent": "TRANSIENT_POP",
        "value": "186",
        "label": "CYQ4",
        "children": []
      }
    ]
  },
  {
    "name": "Seasonal Pop",
    "code": "SEASONAL_POP",
    "parent": "POP_BY_QUAT",
    "label": "Seasonal Pop",
    "children": [
      {
        "name": "SEASONAL_LYQ1",
        "code": "SEASONAL_LYQ1",
        "parent": "SEASONAL_POP",
        "value": "2",
        "label": "LYQ1",
        "children": []
      },
      {
        "name": "SEASONAL_LYQ2",
        "code": "SEASONAL_LYQ2",
        "parent": "SEASONAL_POP",
        "value": "24",
        "label": "LYQ2",
        "children": []
      },
      {
        "name": "SEASONAL_LYQ3",
        "code": "SEASONAL_LYQ3",
        "parent": "SEASONAL_POP",
        "value": "152",
        "label": "LYQ3",
        "children": []
      },
      {
        "name": "SEASONAL_LYQ4",
        "code": "SEASONAL_LYQ4",
        "parent": "SEASONAL_POP",
        "value": "55",
        "label": "LYQ4",
        "children": []
      },
      {
        "name": "SEASONAL_CYQ1",
        "code": "SEASONAL_CYQ1",
        "parent": "SEASONAL_POP",
        "value": "2",
        "label": "CYQ1",
        "children": []
      },
      {
        "name": "SEASONAL_CYQ2",
        "code": "SEASONAL_CYQ2",
        "parent": "SEASONAL_POP",
        "value": "22",
        "label": "CYQ2",
        "children": []
      },
      {
        "name": "SEASONAL_CYQ3",
        "code": "SEASONAL_CYQ3",
        "parent": "SEASONAL_POP",
        "value": "161",
        "label": "CYQ3",
        "children": []
      },
      {
        "name": "SEASONAL_CYQ4",
        "code": "SEASONAL_CYQ4",
        "parent": "SEASONAL_POP",
        "value": "55",
        "label": "CYQ4",
        "children": []
      }
    ]
  }
];

var width = 460,
    height = 300,
    cwidth = 25;

var color = d3.scale.category20();

 var pie = d3.layout.pie()
            .sort(null).value(function (d) {
            return d.value;//since score is the parameter for the pie
        });

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
    .data(function(d) { return pie(d.value); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>

【问题讨论】：

  • 我回滚了您的编辑。如果您对其他版本有疑问，请发布另一个问题。

标签： d3.js pie-chart


【解决方案1】：

您没有将数据数组 (dataset) 绑定到您的组。应该是：

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

然后，对于内部选择，使用children：

var path = gs.selectAll("path")
    .data(function(d) {
        return pie(d.children);
    })
    //etc...

这是您的代码进行了这些更改：

var dataset = [{
  "name": "Population Quater",
  "code": "POP_QUATER",
  "parent": "POP_BY_QUAT",
  "children": [{
    "name": "POP_CYQ1",
    "code": "POP_CYQ1",
    "parent": "POP_QUATER",
    "value": "6772",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "POP_CYQ2",
    "code": "POP_CYQ2",
    "parent": "POP_QUATER",
    "value": "6716",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "POP_CYQ3",
    "code": "POP_CYQ3",
    "parent": "POP_QUATER",
    "value": "6714",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "POP_CYQ4",
    "code": "POP_CYQ4",
    "parent": "POP_QUATER",
    "value": "6703",
    "label": "CYQ4",
    "children": []
  }, {
    "name": "POP_LYQ1",
    "code": "POP_LYQ1",
    "parent": "POP_QUATER",
    "value": "6721",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "POP_LYQ2",
    "code": "POP_LYQ2",
    "parent": "POP_QUATER",
    "value": "6671",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "POP_LYQ3",
    "code": "POP_LYQ3",
    "parent": "POP_QUATER",
    "value": "6708",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "POP_LYQ4",
    "code": "POP_LYQ4",
    "parent": "POP_QUATER",
    "value": "6734",
    "label": "LYQ4",
    "children": []
  }]
}, {
  "name": "Transient Pop",
  "code": "TRANSIENT_POP",
  "parent": "POP_BY_QUAT",
  "label": "Transient Pop",
  "children": [{
    "name": "TRANSIENT_LYQ1",
    "code": "TRANSIENT_LYQ1",
    "parent": "TRANSIENT_POP",
    "value": "54",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ2",
    "code": "TRANSIENT_LYQ2",
    "parent": "TRANSIENT_POP",
    "value": "86",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ3",
    "code": "TRANSIENT_LYQ3",
    "parent": "TRANSIENT_POP",
    "value": "219",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ4",
    "code": "TRANSIENT_LYQ4",
    "parent": "TRANSIENT_POP",
    "value": "191",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ1",
    "code": "TRANSIENT_CYQ1",
    "parent": "TRANSIENT_POP",
    "value": "52",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ2",
    "code": "TRANSIENT_CYQ2",
    "parent": "TRANSIENT_POP",
    "value": "91",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ3",
    "code": "TRANSIENT_CYQ3",
    "parent": "TRANSIENT_POP",
    "value": "222",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ4",
    "code": "TRANSIENT_CYQ4",
    "parent": "TRANSIENT_POP",
    "value": "186",
    "label": "CYQ4",
    "children": []
  }]
}, {
  "name": "Seasonal Pop",
  "code": "SEASONAL_POP",
  "parent": "POP_BY_QUAT",
  "label": "Seasonal Pop",
  "children": [{
    "name": "SEASONAL_LYQ1",
    "code": "SEASONAL_LYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "SEASONAL_LYQ2",
    "code": "SEASONAL_LYQ2",
    "parent": "SEASONAL_POP",
    "value": "24",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "SEASONAL_LYQ3",
    "code": "SEASONAL_LYQ3",
    "parent": "SEASONAL_POP",
    "value": "152",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "SEASONAL_LYQ4",
    "code": "SEASONAL_LYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "SEASONAL_CYQ1",
    "code": "SEASONAL_CYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "SEASONAL_CYQ2",
    "code": "SEASONAL_CYQ2",
    "parent": "SEASONAL_POP",
    "value": "22",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "SEASONAL_CYQ3",
    "code": "SEASONAL_CYQ3",
    "parent": "SEASONAL_POP",
    "value": "161",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "SEASONAL_CYQ4",
    "code": "SEASONAL_CYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "CYQ4",
    "children": []
  }]
}];

var width = 460,
  height = 300,
  cwidth = 25;

var color = d3.scale.category20();

var pie = d3.layout.pie()
  .sort(null).value(function(d) {
    return d.value; //since score is the parameter for the pie
  });

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
var path = gs.selectAll("path")
  .data(function(d) {
    return pie(d.children);
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d);
  });
<script src="https://d3js.org/d3.v3.min.js"></script>

【讨论】：

  • 谢谢。我刚刚将代码修改为 v4 并进行了所需的更改，它似乎又失败了。这可能是什么原因。修改后的代码有问题。
  • 请不要这样编辑您的问题，这会使答案变得毫无用处，而且对花时间帮助您的人不公平。我使用了 v3，因为这是您原始问题中的版本。对于 v4 的问题，请将其作为另一个问题发布。
猜你喜欢
  • 2016-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-07
  • 2013-08-27
  • 2020-01-28
  • 2022-01-02
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode