使用 D3.js 创建频率计数饼图

Posted

技术标签:

【中文标题】使用 D3.js 创建频率计数饼图【英文标题】:Create Pie chart of frequency count with D3.js 【发布时间】:2016-11-01 09:47:27 【问题描述】:

我有一个关于 d3.js 的问题

假设我有这个数据:

A A B K J I O N P B N J D G R X S O M H Y D J B T N Y S B N R N E B U D B G D G Y F T K O

我想获取每个字母的频率计数并用 D3.js 制作饼图

【问题讨论】:

你试过什么?我知道这是一个虚拟数据,但是您必须尝试使用​​原始数据进行某些操作。你也可以分享一下吗? 您不能使用外部网络服务提供该数据。我使用 WSO2 MS4J 做了类似的事情。从中我使用 Java 读取数据并计算频率,并使用 d3.js 作为正确的 HTTP 响应将其返回到服务器。 我用Rstudio手动统计频率,新建表,用D3做饼图。我相信我所做的事情没有效果。有没有用 D3 计算频率? 【参考方案1】:

您不需要d3 进行计数,只需简单的 javascript

var string = "A A B K J I O N P B N J D G R X S O M H Y D J B T N Y S B N R N E B U D B G D G Y F T K O";
var counts = ;
string.split(" ").forEach(function(d) 
  if (!counts[d]) 
    counts[d] = 0;
  
  counts[d]++;
);

从那里饼图变得漂亮:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    var string = "A A B K J I O N P B N J D G R X S O M H Y D J B T N Y S B N R N E B U D B G D G Y F T K O";
    var counts = ;
    string.split(" ").forEach(function(d) 
      if (!counts[d]) 
        counts[d] = 0;
      
      counts[d]++;
    );

    var data = d3.entries(counts);

    console.log(data)

    var width = 360;
    var height = 360;
    var radius = Math.min(width, height) / 2;

    var color = d3.scaleOrdinal(d3.schemeCategory20b);

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

    var arc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius);

    var pie = d3.pie()
      .value(function(d) 
        return d.value;
      )
      .sort(null);

    var path = svg.selectAll('path')
      .data(pie(data))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) 
        return color(d.data.key);
      );
  </script>
</body>

</html>

【讨论】:

你能看看这个情况并帮助***.com/q/39998877/5756149

以上是关于使用 D3.js 创建频率计数饼图的主要内容,如果未能解决你的问题,请参考以下文章

使用 d3.js 和 TypeScript 绘制饼图时出现编译错误

Matplotlib和Seaborn之饼图

即使 Web 浏览器控制台中没有错误,d3 js 饼图也没有显示。和 SVG 正在追加

使用 d3.js 向饼图添加工具提示

频率计数日期

标签外弧(饼图)d3.js