时间戳

首页 > 解决方案 > d3.js：无法读取未定义的属性“调用”

javascript - d3.js：无法读取未定义的属性“调用”

问题描述

我通过使用方法 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>

标签： javascriptd3.js

解决方案

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>

推荐阅读