javascript - 无法从数据集制作饼图-6ren

javascript - 无法从数据集制作饼图

转载作者：行者123 更新时间：2023-12-03 06:41:00

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Testing Pie Chart</title>
         <script src="d3.v3.min.js" charset="utf-8"></script>
         <style type="text/css">
         #chart {  
            margin-top: 100px;                                              
            position: absolute;  
            margin-right: 50px;
            margin-left: 50px;                                           
          }                                                                 
          .tooltip {                                                        
            background: #eee;                                               
            box-shadow: 0 0 5px #999999;                                    
            color: #900C3F;                                                    
            display: inline-block;                                                  
            font-size: 12px;                                                
            left: 600px;                                                    
            padding: 10px;                                                  
            position: absolute;                                             
            text-align: center;                                             
            top: 95px;                                                      
            width: 150px;                                                    
            z-index: 10;  
            opacity: 1;                                                 
        }                                                                 
        rect {
           stroke-width: 2;
        }
        path {
          stroke: #ffffff;
          stroke-width: 0.5;
      }
      div.tooltip {
      position: absolute;
      z-index: 999;
      padding: 10px;
      background: #f4f4f4;
      border: 0px;
      border-radius: 3px;
      pointer-events: none;
      font-size: 11px;
      color: #000;
      line-height: 16px;
      border: 1px solid #d4d4d4;
      }

      .legend{
        margin-left: 300px;
      }
         </style>
      </head>
      <body>
        <div id="chart"></div>
        <div id="toolTip" class="tooltip" style="opacity: 0;"></div>
        <script type="text/javascript">

    var div = d3.select("#toolTip");

           var data = [ ["IP", "count"]
          ["192.168.12.1", "20"], 
          ["76.09.45.34", "40"], 
          ["34.91.23.76", "80"],
          ["192.168.19.32", "16"], 
          ["192.168.10.89", "50"], 
          ["192.178.34.07", "18"],
          ["192.168.12.98", "30"]];

    var width = 300,
      height = 300;
    var margin = {top: 15, right: 15, bottom: 20, left: 40},
      radius = Math.min(width, height) / 2 - 10;
    var legendRectSize = 18,
        legendSpacing = 4;
          

        var color = d3.scale.category20b();

        var arc = d3.svg.arc()
            .outerRadius(radius);
          
          var arcOver = d3.svg.arc()
                .outerRadius(radius + 10);

        var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d.data.count; });

          var labelArc = d3.svg.arc()
            .outerRadius(radius - 40)
            .innerRadius(radius - 40);
          
        var svg = d3.select("#chart").append("svg")
            .datum(data)
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var arcs = svg.selectAll(".arc")
            .data(pie)
            .enter().append("g")
            .attr("class", "arc");
          
         var arcs2 = svg.selectAll(".arc2")
            .data(pie)
            .enter().append("g")
            .attr("class", "arc2");

          
        arcs.append("path")
            .attr("fill", function(d, i) { return color(i); })
            .on("mouseover", function(d) {
            var htmlMsg="";
              div.transition()    
                    .style("opacity",0.9);
                  var total = d3.sum(data.map(function(d) {                   
                      return d.count;                                           
                  })); 
            var percent = Math.round(1000 * d.data.count / total) / 10;     
                div.html(
                 "IP :"+ d.data.IP +""+"<br/>"+
                 "Count : " +  d.data.count +"<br/>" + 
                 "Percent: " + percent + '%'+ htmlMsg)
                .style("left",  (d3.event.pageX) + "px")
                  .style("top",  (d3.event.pageY) + "px");  

              svg.selectAll("path").sort(function (a, b) { 
                  if (a != d) return -1;               
                else return 1;                             
              });
          
            var endAngle = d.endAngle + 0.1;
            var startAngle = d.startAngle - 0.1;
            var arcOver = d3.svg.arc()
                  .outerRadius(radius + 10).endAngle(endAngle).startAngle(startAngle);
                      d3.select(this)
                        .attr("stroke","white")
                        .transition()
                        .ease("bounce")
                        .duration(1000)
                        .attr("d", arcOver)             
                        .attr("stroke-width",6);
                  })

            .on("mouseout", function(d) {
                  div.transition()        
                    .duration(500)      
                    .style("opacity", 0); 
                    d3.select(this).transition()            
                       .attr("d", arc)
                       .attr("stroke","none");
                })
              .transition()
              .ease("bounce")
              .duration(2000)
              .attrTween("d", tweenPie);

        function tweenPie(b) {
          b.innerRadius = 0;
          var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
          return function(t) { return arc(i(t)); };
        }

            var k=0;
        arcs2.append("text")
        .transition()
            .ease("elastic")
          .duration(2000)
          .delay(function (d, i) {
            return i * 250;
          })
              .attr("x","6")
              .attr("dy", ".35em")
              .text(function(d) { if(d.data.count >0){ k = k+1; return d.data.count;} })
              .attr("transform", function(d) { if (k >1){return "translate(" + labelArc.centroid(d) + ") rotate(" + angle(d) + ")";} else{return "rotate(-360)";} })
              .attr("font-size", "10px");
          

        function type(d) {
          d.count = +d.count;
          return d;
        }
        function angle(d) {
              var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
              return a > 90 ? a - 180 : a;
        }

     var legend = d3.select("#chart")
        .append("svg")
        .attr("class", "legend")
        .attr("width", radius+50)
        .attr("height", radius * 2)
        .selectAll("g")
        .data(color.domain())
        .enter()
        .append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

     legend.append('rect')
        .attr('width', legendRectSize)
        .attr('height', legendRectSize)                                   
       .style('fill', color)
       .style('stroke', color);
      
      legend.append('text')
        .attr('x', legendRectSize + legendSpacing)
        .attr('y', legendRectSize - legendSpacing)
        .data(data)
        .text(function(d,i) { return d.IP; });
        
        
        </script>
      </body>
     </html>

我正在尝试使用提供的数据集制作饼图，但遇到错误。如何定义参数d以从变量“data”及其后续值“IP”和“count”中获取数据？我不知道我的代码中犯了什么错误。我应该对当前代码进行哪些更改才能获得具有当前数据格式的饼图？请帮我。我被困住了。条件是我不应该在此代码中使用任何类型的 .csv 或 .tsv 文件进行导入。谢谢你的帮助。

最佳答案

一个问题是您的数据数组...您需要删除其中的第一项[此外，您在该项目后面缺少一个“，”。但该项目本身并不是必需的，因为它是一个数组]。
第二个是饼图函数内的 d.data.count ...您需要将其引用为 d[1]，因为您需要在图表中的数据数组中绘制第二项。

下面的工作代码:

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Testing Pie Chart</title>
         <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
         <style type="text/css">
         #chart {  
            margin-top: 100px;                                              
            position: absolute;  
            margin-right: 50px;
            margin-left: 50px;                                           
          }                                                                 
          .tooltip {                                                        
            background: #eee;                                               
            box-shadow: 0 0 5px #999999;                                    
            color: #900C3F;                                                    
            display: inline-block;                                                  
            font-size: 12px;                                                
            left: 600px;                                                    
            padding: 10px;                                                  
            position: absolute;                                             
            text-align: center;                                             
            top: 95px;                                                      
            width: 150px;                                                    
            z-index: 10;  
            opacity: 1;                                                 
        }                                                                 
        rect {
           stroke-width: 2;
        }
        path {
          stroke: #ffffff;
          stroke-width: 0.5;
      }
      div.tooltip {
      position: absolute;
      z-index: 999;
      padding: 10px;
      background: #f4f4f4;
      border: 0px;
      border-radius: 3px;
      pointer-events: none;
      font-size: 11px;
      color: #000;
      line-height: 16px;
      border: 1px solid #d4d4d4;
      }

      .legend{
        margin-left: 300px;
      }
         </style>
      </head>
      <body>
        <div id="chart"></div>
        <div id="toolTip" class="tooltip" style="opacity: 0;"></div>
        <script type="text/javascript">

    var div = d3.select("#toolTip");

           var data = [ 
          ["192.168.12.1", "20"], 
          ["76.09.45.34", "40"], 
          ["34.91.23.76", "80"],
          ["192.168.19.32", "16"], 
          ["192.168.10.89", "50"], 
          ["192.178.34.07", "18"],
          ["192.168.12.98", "30"]];

    var width = 300,
      height = 300;
    var margin = {top: 15, right: 15, bottom: 20, left: 40},
      radius = Math.min(width, height) / 2 - 10;
    var legendRectSize = 18,
        legendSpacing = 4;
          

        var color = d3.scale.category20b();

        var arc = d3.svg.arc()
            .outerRadius(radius);
          
          var arcOver = d3.svg.arc()
                .outerRadius(radius + 10);

        var pie = d3.layout.pie()
            .sort(null)
            .value(function(d) { return d[1]; });

          var labelArc = d3.svg.arc()
            .outerRadius(radius - 40)
            .innerRadius(radius - 40);
          
        var svg = d3.select("#chart").append("svg")
            .datum(data)
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var arcs = svg.selectAll(".arc")
            .data(pie)
            .enter().append("g")
            .attr("class", "arc");
          
         var arcs2 = svg.selectAll(".arc2")
            .data(pie)
            .enter().append("g")
            .attr("class", "arc2");

          
        arcs.append("path")
            .attr("fill", function(d, i) { return color(i); })
            .on("mouseover", function(d) {
            var htmlMsg="";
              div.transition()    
                    .style("opacity",0.9);
                  var total = d3.sum(data.map(function(d) {                   
                      return d.count;                                           
                  })); 
            var percent = Math.round(1000 * d.data.count / total) / 10;     
                div.html(
                 "IP :"+ d.data.IP +""+"<br/>"+
                 "Count : " +  d.data.count +"<br/>" + 
                 "Percent: " + percent + '%'+ htmlMsg)
                .style("left",  (d3.event.pageX) + "px")
                  .style("top",  (d3.event.pageY) + "px");  

              svg.selectAll("path").sort(function (a, b) { 
                  if (a != d) return -1;               
                else return 1;                             
              });
          
            var endAngle = d.endAngle + 0.1;
            var startAngle = d.startAngle - 0.1;
            var arcOver = d3.svg.arc()
                  .outerRadius(radius + 10).endAngle(endAngle).startAngle(startAngle);
                      d3.select(this)
                        .attr("stroke","white")
                        .transition()
                        .ease("bounce")
                        .duration(1000)
                        .attr("d", arcOver)             
                        .attr("stroke-width",6);
                  })

            .on("mouseout", function(d) {
                  div.transition()        
                    .duration(500)      
                    .style("opacity", 0); 
                    d3.select(this).transition()            
                       .attr("d", arc)
                       .attr("stroke","none");
                })
              .transition()
              .ease("bounce")
              .duration(2000)
              .attrTween("d", tweenPie);

        function tweenPie(b) {
          b.innerRadius = 0;
          var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
          return function(t) { return arc(i(t)); };
        }

            var k=0;
        arcs2.append("text")
        .transition()
            .ease("elastic")
          .duration(2000)
          .delay(function (d, i) {
            return i * 250;
          })
              .attr("x","6")
              .attr("dy", ".35em")
              .text(function(d) { if(d.data.count >0){ k = k+1; return d.data.count;} })
              .attr("transform", function(d) { if (k >1){return "translate(" + labelArc.centroid(d) + ") rotate(" + angle(d) + ")";} else{return "rotate(-360)";} })
              .attr("font-size", "10px");
          

        function type(d) {
          d.count = +d.count;
          return d;
        }
        function angle(d) {
              var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
              return a > 90 ? a - 180 : a;
        }

     var legend = d3.select("#chart")
        .append("svg")
        .attr("class", "legend")
        .attr("width", radius+50)
        .attr("height", radius * 2)
        .selectAll("g")
        .data(color.domain())
        .enter()
        .append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

     legend.append('rect')
        .attr('width', legendRectSize)
        .attr('height', legendRectSize)                                   
       .style('fill', color)
       .style('stroke', color);
      
      legend.append('text')
        .attr('x', legendRectSize + legendSpacing)
        .attr('y', legendRectSize - legendSpacing)
        .data(data)
        .text(function(d,i) { return d.IP; });
        
        
        </script>
      </body>
     </html>

关于javascript - 无法从数据集制作饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37959809/

文章推荐： Javascript touchleave 和 touchcancel 不填充

文章推荐： javascript - 在按键三.js 上更改对象 Material 的问题

文章推荐： javascript - 在html中查找某个数字并将其替换为自定义文本

文章推荐： javascript - 哪一个比另一个表现更好？ ui-sref 还是 href？

Matlab 填充 contour3 图，如 contourf 图
我想填充 3D 等高线图 (contour3(X,Y,Z))，就像 2D 等高线填充图 (contourf(X,Y,Z))。但我无法弄清楚如何实现这一目标。 contour3 和 surf 的组合不是
javascript - c3.js - 带有工具提示的 c3 图，里面有 c3 图
我有一个 c3.js 折线图，表示 2 个值的演变。我需要折线图的工具提示是饼图(工具提示 = 另一个 c3.js 图形)。这是我成功的: http://jsfiddle.net/owhxgaqm/
pandas - 来自 Pandas Dataframe 的 Seaborn fiddle 图，每列都有自己单独的 fiddle 图
我有具有结构的 Pandas 数据框: A B 0 1 1 1 2 1 2 3 4 3 3 7 4 6 8 如何生成 Seaborn Violin 图，每列作为其自己的单独
c++ - 基于 2D 图 block 的游戏，当我用相机放大时，图 block Sprite 之间会出现间隙吗？
我正在使用 D3DXSPRITE 方法将我的 map 图 block 绘制到屏幕上，我刚刚添加了一个缩放功能，当您按住向上箭头时会放大，但注意到您现在可以看到图 block 之间的间隙，这是一些屏幕截
数据结构-图
今天我们开始学习目前学习到的最难最复杂的数据结构图。简单回顾一下之前学习的数据结构，数组、单链表、队列等线性表中数据元素是一对一关系，而树结构中数据元素是一对多关系，而图结构中数据元素则是多对
linux服务器磁盘扩容的方法(图)
1、系统环境如下图： 2、为该系统添加一块新的虚拟硬盘，添加后需重启虚拟机，否则系统不识别；如下图，/dev/sdc 是新添加的硬盘； 3、fdisk /dev/sdc为新硬盘创建分区：
基于Linux下Nagios的安装与配置说明介绍[图]
1、nagios简介　　nagios是一款开源的电脑系统和网络监视工具，能有效监控windows、linux和unix的主机状态，交换机路由器等网络设置，打印机等。在系统或服务状态异常时发
从亚马逊的7个例子中学会如何成功做好邮件营销(图)
越来越多人开始习惯用手机上网，浏览网页、查看邮件···移动化已经成为互联网发展必然趋势，包括facebook在内的很多互联网公司都将移动广告作为下一个淘金地
Android图片处理实例介绍(图)
1.图片处理 1.圆角图片复制代码代码如下: /** * 转换成圆角 * &n
sqlserver数据库导入数据操作详解(图)
Microsoft SQL Server Management Studio是SQL SERVER的客户端工具，相信大家都知道。我不知道大伙使用导入数据的情况怎么样，反正我最近是遇到过。主要是因为没
debian6配置mysql允许远程连接的方法(图)
debian6系统：首先先安装mysql吧：打开终端（root）用户登入 apt-get purge mysql-server-5.5 安装完成后：默认情况下Mysql只允许本地登录
fedora16英文环境下支持中文输入法的方法介绍(图)
fedora16英文环境下支持中文输入法的方法 fedora16英文环境下支持FCITX的中文输入法： $ im-chooser 就会出现选择界面，选择第二个就行了。
.net预编译命令详解(图)
Net预编译命令 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_compiler.exe -? 显示说明我们需要选择的命令为&n
主板BIOS恢复出厂设置的方法[图]
有的时候电脑出现一些故障有的时候通过将其修改bios设置的方法来解决故障，那么在bios上设置能不能将电脑恢复出厂设置呢?其实也是可以的。方法也很简单的，只要会进入电脑的bios懂的上面英文的意思就
[图]Deepin系统首次在龙芯3号电脑上运行成功
笔者曾介绍过Deepin 将对龙芯进行全面支持，打造最优美龙芯电脑桌面。现在Deepin团队移植工作取得了突破性的成果，Deepin桌面已经在龙芯3A和龙芯3B电脑上成功运行起来了。以下为龙芯3
通过锁定Win7注册表编辑器来防止主页被篡改的方法(图)
在安装一些软件之后，我们的电脑总是会发生一点小变化，不是桌面上多了几个网址图标，就是IE浏览器的默认主页被篡改成乱七八糟的网址。最可气的是，在IE设置中将默认主页改回来后，下次启动Win7后又变了回
常用的注册表编辑器打开的方法汇总(图)
“注册表编辑器怎么打开”虽说不是很难的问题，但是对于对电脑常识不是很擅长的网民来说，当电脑出现问题或需要更改设置时，着实还是件头疼的问题。因为需要打开注册表进行操作解决。那么如何打开注册表编辑器呢?
WordPress建站的10个重要的安全插件和技巧(图)
这篇文章重点介绍10个重要的WordPress安全插件和技巧，用来保护WordPress网站或者博客。 1. WP Security 人工帮助你修复被黑客入侵的网站，只要按照他们网站上的联系电话
实现dedecms友情链接分栏目调用的方法(图)
其实运用object和javascript调用外部文件，也能实现不同栏目调用不同友情链接，即相当于调用不同栏目友情链接文件， {dede:field.typeid/}来获取当前栏目的ID。
复数矩阵的 R 图
我有一个复值矩阵。如果我发出命令: plot(myMatrix) 然后它在图形设备上显示一种散点图，X 轴标记为 Re(myMatrix)，Y 轴标记为 Im(myMatrix)。这显示了我正在寻找

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法从数据集制作饼图