个人中心
gpt4 book ai didi

javascript - 尝试使用 d3.csv 时出现错误 "data not defined"？

转载 作者：行者123 更新时间：2023-12-03 02:16:52 25 4
gpt4 key购买 nike

我正在尝试使用 csv 格式的 iris 数据集绘制散点图。这里我使用 d3 v4。其 HTML 代码如下。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">

           d3.csv('iris.csv',function(error,data){

            data.forEach(function(d){

              d.SepalLength= +d.SepalLength;
              d.SepalWidth = +d.SepalWidth;
              d.PetalLength = +d.PetalLength;
              d.Species = d.Species;
            });

          });

          // declare height and width of the svg element

          var w =800;
          var h = 500;

          var svg = d3.select('body')
          .append('svg')
          .attr('height',h)
          .attr('width',w);

          // defining scales
          var xScale = d3.scaleLinear()
          .domain([0,d3.max(function(d){return d.PetalLength})])
          .range([0,w]);
          var yScale = d3.scaleLinear()
          .domain([0,d3.max(function(d){return d.SepalLength})])
          .range([h,0]);


          svg.selectAll('circle')
          .data(data)
          .enter()
          .attr('cx',function(d){return xScale(d.PetalLength);})
          .attr('cy',function(d){return yScale(d.SepalLength);})
          .attr('fill',function(d){return 'red';})










        </script>
    </body>
</html>

我使用的数据集如下

"","SepalLength","SepalWidth","PetalLength","PetalWidth","Species"
"1",5.1,3.5,1.4,0.2,"setosa"
"2",4.9,3,1.4,0.2,"setosa"
"3",4.7,3.2,1.3,0.2,"setosa"
"4",4.6,3.1,1.5,0.2,"setosa"
"5",5,3.6,1.4,0.2,"setosa"
"6",5.4,3.9,1.7,0.4,"setosa"
"7",4.6,3.4,1.4,0.3,"setosa"
"8",5,3.4,1.5,0.2,"setosa"
"9",4.4,2.9,1.4,0.2,"setosa"
"10",4.9,3.1,1.5,0.1,"setosa"
"11",5.4,3.7,1.5,0.2,"setosa"
"12",4.8,3.4,1.6,0.2,"setosa"
"13",4.8,3,1.4,0.1,"setosa"
"14",4.3,3,1.1,0.1,"setosa"
"15",5.8,4,1.2,0.2,"setosa"
"16",5.7,4.4,1.5,0.4,"setosa"
"17",5.4,3.9,1.3,0.4,"setosa"
"18",5.1,3.5,1.4,0.3,"setosa"
"19",5.7,3.8,1.7,0.3,"setosa"
"20",5.1,3.8,1.5,0.3,"setosa"
"21",5.4,3.4,1.7,0.2,"setosa"
"22",5.1,3.7,1.5,0.4,"setosa"
"23",4.6,3.6,1,0.2,"setosa"
"24",5.1,3.3,1.7,0.5,"setosa"
"25",4.8,3.4,1.9,0.2,"setosa"
"26",5,3,1.6,0.2,"setosa"
"27",5,3.4,1.6,0.4,"setosa"
"28",5.2,3.5,1.5,0.2,"setosa"
"29",5.2,3.4,1.4,0.2,"setosa"
"30",4.7,3.2,1.6,0.2,"setosa"
"31",4.8,3.1,1.6,0.2,"setosa"
"32",5.4,3.4,1.5,0.4,"setosa"
"33",5.2,4.1,1.5,0.1,"setosa"
"34",5.5,4.2,1.4,0.2,"setosa"
"35",4.9,3.1,1.5,0.2,"setosa"
"36",5,3.2,1.2,0.2,"setosa"
"37",5.5,3.5,1.3,0.2,"setosa"
"38",4.9,3.6,1.4,0.1,"setosa"
"39",4.4,3,1.3,0.2,"setosa"
"40",5.1,3.4,1.5,0.2,"setosa"
"41",5,3.5,1.3,0.3,"setosa"
"42",4.5,2.3,1.3,0.3,"setosa"
"43",4.4,3.2,1.3,0.2,"setosa"
"44",5,3.5,1.6,0.6,"setosa"
"45",5.1,3.8,1.9,0.4,"setosa"
"46",4.8,3,1.4,0.3,"setosa"
"47",5.1,3.8,1.6,0.2,"setosa"
"48",4.6,3.2,1.4,0.2,"setosa"
"49",5.3,3.7,1.5,0.2,"setosa"
"50",5,3.3,1.4,0.2,"setosa"
"51",7,3.2,4.7,1.4,"versicolor"
"52",6.4,3.2,4.5,1.5,"versicolor"
"53",6.9,3.1,4.9,1.5,"versicolor"
"54",5.5,2.3,4,1.3,"versicolor"
"55",6.5,2.8,4.6,1.5,"versicolor"
"56",5.7,2.8,4.5,1.3,"versicolor"
"57",6.3,3.3,4.7,1.6,"versicolor"
"58",4.9,2.4,3.3,1,"versicolor"
"59",6.6,2.9,4.6,1.3,"versicolor"
"60",5.2,2.7,3.9,1.4,"versicolor"
"61",5,2,3.5,1,"versicolor"
"62",5.9,3,4.2,1.5,"versicolor"
"63",6,2.2,4,1,"versicolor"
"64",6.1,2.9,4.7,1.4,"versicolor"
"65",5.6,2.9,3.6,1.3,"versicolor"
"66",6.7,3.1,4.4,1.4,"versicolor"
"67",5.6,3,4.5,1.5,"versicolor"
"68",5.8,2.7,4.1,1,"versicolor"
"69",6.2,2.2,4.5,1.5,"versicolor"
"70",5.6,2.5,3.9,1.1,"versicolor"
"71",5.9,3.2,4.8,1.8,"versicolor"
"72",6.1,2.8,4,1.3,"versicolor"
"73",6.3,2.5,4.9,1.5,"versicolor"
"74",6.1,2.8,4.7,1.2,"versicolor"
"75",6.4,2.9,4.3,1.3,"versicolor"
"76",6.6,3,4.4,1.4,"versicolor"
"77",6.8,2.8,4.8,1.4,"versicolor"
"78",6.7,3,5,1.7,"versicolor"
"79",6,2.9,4.5,1.5,"versicolor"
"80",5.7,2.6,3.5,1,"versicolor"
"81",5.5,2.4,3.8,1.1,"versicolor"
"82",5.5,2.4,3.7,1,"versicolor"
"83",5.8,2.7,3.9,1.2,"versicolor"
"84",6,2.7,5.1,1.6,"versicolor"
"85",5.4,3,4.5,1.5,"versicolor"
"86",6,3.4,4.5,1.6,"versicolor"
"87",6.7,3.1,4.7,1.5,"versicolor"
"88",6.3,2.3,4.4,1.3,"versicolor"
"89",5.6,3,4.1,1.3,"versicolor"
"90",5.5,2.5,4,1.3,"versicolor"
"91",5.5,2.6,4.4,1.2,"versicolor"
"92",6.1,3,4.6,1.4,"versicolor"
"93",5.8,2.6,4,1.2,"versicolor"
"94",5,2.3,3.3,1,"versicolor"
"95",5.6,2.7,4.2,1.3,"versicolor"
"96",5.7,3,4.2,1.2,"versicolor"
"97",5.7,2.9,4.2,1.3,"versicolor"
"98",6.2,2.9,4.3,1.3,"versicolor"
"99",5.1,2.5,3,1.1,"versicolor"
"100",5.7,2.8,4.1,1.3,"versicolor"
"101",6.3,3.3,6,2.5,"virginica"
"102",5.8,2.7,5.1,1.9,"virginica"
"103",7.1,3,5.9,2.1,"virginica"
"104",6.3,2.9,5.6,1.8,"virginica"
"105",6.5,3,5.8,2.2,"virginica"
"106",7.6,3,6.6,2.1,"virginica"
"107",4.9,2.5,4.5,1.7,"virginica"
"108",7.3,2.9,6.3,1.8,"virginica"
"109",6.7,2.5,5.8,1.8,"virginica"
"110",7.2,3.6,6.1,2.5,"virginica"
"111",6.5,3.2,5.1,2,"virginica"
"112",6.4,2.7,5.3,1.9,"virginica"
"113",6.8,3,5.5,2.1,"virginica"
"114",5.7,2.5,5,2,"virginica"
"115",5.8,2.8,5.1,2.4,"virginica"
"116",6.4,3.2,5.3,2.3,"virginica"
"117",6.5,3,5.5,1.8,"virginica"
"118",7.7,3.8,6.7,2.2,"virginica"
"119",7.7,2.6,6.9,2.3,"virginica"
"120",6,2.2,5,1.5,"virginica"
"121",6.9,3.2,5.7,2.3,"virginica"
"122",5.6,2.8,4.9,2,"virginica"
"123",7.7,2.8,6.7,2,"virginica"
"124",6.3,2.7,4.9,1.8,"virginica"
"125",6.7,3.3,5.7,2.1,"virginica"
"126",7.2,3.2,6,1.8,"virginica"
"127",6.2,2.8,4.8,1.8,"virginica"
"128",6.1,3,4.9,1.8,"virginica"
"129",6.4,2.8,5.6,2.1,"virginica"
"130",7.2,3,5.8,1.6,"virginica"
"131",7.4,2.8,6.1,1.9,"virginica"
"132",7.9,3.8,6.4,2,"virginica"
"133",6.4,2.8,5.6,2.2,"virginica"
"134",6.3,2.8,5.1,1.5,"virginica"
"135",6.1,2.6,5.6,1.4,"virginica"
"136",7.7,3,6.1,2.3,"virginica"
"137",6.3,3.4,5.6,2.4,"virginica"
"138",6.4,3.1,5.5,1.8,"virginica"
"139",6,3,4.8,1.8,"virginica"
"140",6.9,3.1,5.4,2.1,"virginica"
"141",6.7,3.1,5.6,2.4,"virginica"
"142",6.9,3.1,5.1,2.3,"virginica"
"143",5.8,2.7,5.1,1.9,"virginica"
"144",6.8,3.2,5.9,2.3,"virginica"
"145",6.7,3.3,5.7,2.5,"virginica"
"146",6.7,3,5.2,2.3,"virginica"
"147",6.3,2.5,5,1.9,"virginica"
"148",6.5,3,5.2,2,"virginica"
"149",6.2,3.4,5.4,2.3,"virginica"
"150",5.9,3,5.1,1.8,"virginica"

当我在浏览器上运行它并打开控制台时，浏览器会抛出此错误ReferenceError:数据未定义。根据 FireFox 文档，当提到的变量未正确定义时，就会出现这种情况。

d3.csv()函数使用正确吗？感谢您提前提供的帮助!

最佳答案

这是代码的稍微修改版本，其唯一目标是至少在页面中显示某些内容。要让它变得漂亮还有很多工作要做，但至少你会有一些开始:

d3.csv('iris.csv',function(error,data){

  data.forEach(function(d) {
    d.SepalLength= +d.SepalLength;
    d.SepalWidth = +d.SepalWidth;
    d.PetalLength = +d.PetalLength;
    d.Species = d.Species;
  });

  var w = 800;
  var h = 500;

  var svg = d3.select('body')
  .append('svg')
  .attr('height',h)
  .attr('width',w);

  var xScale = d3.scaleLinear()
    .domain([0, d3.max(data.map(p => p.PetalLength))])
    .range([0,w]);
  var yScale = d3.scaleLinear()
    .domain([0, d3.max(data.map(p => p.SepalLength))])
    .range([h,0]);

  svg.selectAll('circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx',function(d){return xScale(d.PetalLength);})
    .attr('cy',function(d){return yScale(d.SepalLength);})
    .attr('r', 10)
    .attr('fill',function(d){return 'red';})
});
<小时/>

首先，由于您需要访问数据来创建 svg 图形，因此必须将图形的创建包含在提取数据的 block 中。因此，您应该在定义图表的最后一行之后关闭 d3.csv('iris.csv',function(error,data){ block 。

这第一步使我们能够消除您提到的错误。

<小时/>

那么圆圈的定义需要一些调整:

svg.selectAll('circle')
  .data(data)
  .enter()
  .append("circle")
  .attr('cx',function(d){return xScale(d.PetalLength);})
  .attr('cy',function(d){return yScale(d.SepalLength);})
  .attr('r', 10)
  .attr('fill',function(d){return 'red';})

append("circle") 部分创建 d3 圆形元素。

r 属性定义圆的半径。

<小时/>

最后，我们可以调整缩放比例，以便通过调整比例来定位圆圈:

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data.map(p => p.PetalLength))])
  .range([0,w]);

关于javascript - 尝试使用 d3.csv 时出现错误 "data not defined"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49336300/

25 4 0
文章推荐： javascript - 我这里哪里出错了？
文章推荐： elasticsearch - 在Elastic Search中找到与查询匹配的关键字
文章推荐： java - Wav文件的标题 block 大小错误
文章推荐： javascript - 如何在绘制第二个多边形后删除多边形
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com