javascript - d3.js:无法读取未定义的属性 'call'-6ren

javascript - d3.js:无法读取未定义的属性 'call'

转载作者：行者123 更新时间：2023-11-30 20:30:35

我通过使用方法 d3.json () 读取一个 json 对象创建了一个 d3 图。但它没有加载，这是因为浏览器控制台向我显示以下错误:

根据我从网上复制的示例，对于这种情况，我使用的是 d3 v3。

如果有人能解释为什么会出现此错误，我将不胜感激。

事不宜迟，我感激地说再见。

下面我留下这个例子的完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
    <script src="https://d3js.org/d3-selection.v1.min.js"></script>
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script src="https://d3js.org/d3-force.v1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body style="background-color: rgb(233, 236, 239);">
<br><legend align="center">Convergencia de ODS con Plan Nacional de Desarrollo</legend><hr>
<div class="container">
    <div class="jumbotron">
        <script>

            var w = 1200;
            var h = 550;
            var radius = Math.min(w, h);

            var dataset = [
                [ 600, 150]
            ];

            var json = [
                {
                    "pais": "Ecuador",
                    "pais_nid": 14,
                    "ods": "1. Fin a la pobreza",
                    "ods_nid": 35,
                    "ods_color_hex": "E5243B",
                    "objetivos_plan_ods": 5
                },
                {
                    "pais": "Ecuador",
                    "pais_nid": 14,
                    "ods": "2. Hambre cero",
                    "ods_nid": 36,
                    "ods_color_hex": "DDA63A",
                    "objetivos_plan_ods": 9
                }
            ];


            d3.json(json, function(data) {

              var rScale = d3.scale.linear()
                  .domain([0, d3.max(data, function(d) { return d.objetivos_plan_ods; })])
                  .range([2, 40]);

              //Crear un elemento SVG
              var svg = d3.select("div.jumbotron")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  .attr("viewBox", "" + -(w/2) + " " + -(h/2) + " " + w + " " + h + "");

              svg.selectAll("circle")
                  .data(dataset)
                  .enter()
                  .append("circle")
                  .attr("r", 125)
                  .attr("stroke", "rgb(255, 255, 255)")
                  .attr("stroke-width", "8")
                  .attr("fill", "none");

              svg.on("click", function() {
                  document.getElementById("msg").setAttribute("style", "display:none;");
                  document.getElementById("msg").innerHTML = '';
                  d3.event.stopPropagation();
              });

              var node = d3.select("svg")
                  .append("g")
                  .selectAll("circle")
                  .data(data)
                  .enter()
                  .append("circle")
                  .attr("style", "cursor:pointer;")
                  .attr("r", function(d) { return rScale(d.objetivos_plan_ods);})
                  .attr("fill", function(d) {
                      return "rgba(" + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + ", 0.50)";
                  })
                  .attr("id", function(d) { return "circle-" + d.ods_nid; })
                  .on("click",function(d) {
                      document.getElementById("msg").removeAttribute("style");
                      document.getElementById("circle-" + d.ods_nid).setAttribute("stroke", "rgb(140, 233, 255)");
                      document.getElementById("circle-" + d.ods_nid).setAttribute("stroke-width", "6");
                      document.getElementById("msg").innerHTML = d.ods;
                      d3.event.stopPropagation();
                  })
                  .on("mouseout", function(d) {
                      document.getElementById("msg").setAttribute("style", "display:none;");
                      document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke");
                      document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke-width");
                      document.getElementById("msg").innerHTML = '';
                      d3.event.stopPropagation();
                  });

              d3.forceSimulation(data)
                  .force("charge", d3.forceCollide().radius(function(d) { return rScale(d.objetivos_plan_ods); }))

                  .force("r", d3.forceRadial(function(d) { return 125; }))
                  .on("tick", ticked);

              function ticked() {
                  node
                      .attr("cx", function(d) { return d.x; })
                      .attr("cy", function(d) { return d.y; });
              }

              var color = d3.scale.category20();

              var pie = d3.layout.pie()
                  .value(function(d) { return 5; });

              var arc = d3.svg.arc()
                  .innerRadius(radius - 508)
                  .outerRadius(radius - 480);

              d3.select("svg")
                  .datum(data).selectAll("path")
                  .data(pie)
                  .enter()
                  .append("path")
                  .attr("stroke", "rgb(233, 236, 239)")
                  .attr("stroke-width", "3")
                  .attr("fill", function(d) { return "#" + d.ods_color_hex; })
                  .attr("d", arc);
          })
        </script>
        <div class="row">
            <div class="col-lg-12">
                <div id="msg" style="display:none;" class="underline alert alert-warning" align="center"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

最佳答案

d3.json是调用外部json文件获取数据的函数。 d3.json 函数正在尝试调用外部 json 文件，并且它需要第一个参数中的文件路径。你在第一个参数中传递了一个 json 数据，它对这个函数无效。这就是错误发生的原因。

在您的情况下，您不需要调用 d3.json。你可以去掉d3.json这个函数，把json变量重命名为data，这样就可以正常工作了。

如果你有任何json文件而不是数据，那么你可以使用这个函数，你需要在这个函数的第一个参数中传递文件路径。

请检查以下代码段。

var w = 1200;
var h = 550;
var radius = Math.min(w, h);

var dataset = [
    [ 600, 150]
];

var data = [
    {
        "pais": "Ecuador",
        "pais_nid": 14,
        "ods": "1. Fin a la pobreza",
        "ods_nid": 35,
        "ods_color_hex": "E5243B",
        "objetivos_plan_ods": 5
    },
    {
        "pais": "Ecuador",
        "pais_nid": 14,
        "ods": "2. Hambre cero",
        "ods_nid": 36,
        "ods_color_hex": "DDA63A",
        "objetivos_plan_ods": 9
    }
];


//d3.json(json, function(data) {

  var rScale = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return d.objetivos_plan_ods; })])
      .range([2, 40]);

  //Crear un elemento SVG
  var svg = d3.select("div.jumbotron")
      .append("svg")
      .attr("width", w)
      .attr("height", h)
      .attr("viewBox", "" + -(w/2) + " " + -(h/2) + " " + w + " " + h + "");

  svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("r", 125)
      .attr("stroke", "rgb(255, 255, 255)")
      .attr("stroke-width", "8")
      .attr("fill", "none");

  svg.on("click", function() {
      document.getElementById("msg").setAttribute("style", "display:none;");
      document.getElementById("msg").innerHTML = '';
      d3.event.stopPropagation();
  });

  var node = d3.select("svg")
      .append("g")
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("style", "cursor:pointer;")
      .attr("r", function(d) { return rScale(d.objetivos_plan_ods);})
      .attr("fill", function(d) {
          return "rgba(" + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + ", 0.50)";
      })
      .attr("id", function(d) { return "circle-" + d.ods_nid; })
      .on("click",function(d) {
          document.getElementById("msg").removeAttribute("style");
          document.getElementById("circle-" + d.ods_nid).setAttribute("stroke", "rgb(140, 233, 255)");
          document.getElementById("circle-" + d.ods_nid).setAttribute("stroke-width", "6");
          document.getElementById("msg").innerHTML = d.ods;
          d3.event.stopPropagation();
      })
      .on("mouseout", function(d) {
          document.getElementById("msg").setAttribute("style", "display:none;");
          document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke");
          document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke-width");
          document.getElementById("msg").innerHTML = '';
          d3.event.stopPropagation();
      });

  d3.forceSimulation(data)
      .force("charge", d3.forceCollide().radius(function(d) { return rScale(d.objetivos_plan_ods); }))

      .force("r", d3.forceRadial(function(d) { return 125; }))
      .on("tick", ticked);

  function ticked() {
      node
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
  }

  var color = d3.scale.category20();

  var pie = d3.layout.pie()
      .value(function(d) { return 5; });

  var arc = d3.svg.arc()
      .innerRadius(radius - 508)
      .outerRadius(radius - 480);

  d3.select("svg")
      .datum(data).selectAll("path")
      .data(pie)
      .enter()
      .append("path")
      .attr("stroke", "rgb(233, 236, 239)")
      .attr("stroke-width", "3")
      .attr("fill", function(d) { return "#" + d.ods_color_hex; })
      .attr("d", arc);
//})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
    <script src="https://d3js.org/d3-selection.v1.min.js"></script>
    <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script src="https://d3js.org/d3-force.v1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body style="background-color: rgb(233, 236, 239);">
<br><legend align="center">Convergencia de ODS con Plan Nacional de Desarrollo</legend><hr>
<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-lg-12">
                <div id="msg" style="display:none;" class="underline alert alert-warning" align="center"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

关于javascript - d3.js:无法读取未定义的属性 'call'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50376358/

文章推荐： c - 矩阵输入期间的段错误

文章推荐： c - 如何获得正确的时间

文章推荐： c# - 使用 Func 作为 LinqToEntities 的参数

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3.js:无法读取未定义的属性 'call'