使用外部 json 文件使用 d3js 创建气泡图

Using External json file for creating bubble chart using d3js

本文关键字：气泡 创建 文件 外部 json d3js      更新时间：2023-09-26

我是D3js的新手，目前正在尝试使用此链接d3js 气泡 用于创建气泡图的动画 

But in this Link they have used data which is written in the script only . 
What i want is to use an external json File . 
i tried replacing this Code` 
data: {
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ],`
with 
      var data=  d3.json("../AnimateBubble.json", function() {

完整代码在这里

泡泡动画.js

$(document).ready(function() {
  var bubbleChart = new d3.svg.BubbleChart({
    supportResponsive: true,
    //container: => use @default
    size: 600,
    //viewBoxSize: => use @default
    innerRadius: 600 / 3.5,
    //outerRadius: => use @default
    radiusMin: 50,
    //radiusMax: use @default
    //intersectDelta: use @default
    //intersectInc: use @default
    //circleColor: use @default
    var data = d3.json("../AnimateBubble.json", function() {
      plugins: [{
        name: "central-click",
        options: {
          text: "(See more detail)",
          style: {
            "font-size": "12px",
            "font-style": "italic",
            "font-family": "Source Sans Pro, sans-serif",
            //"font-weight": "700",
            "text-anchor": "middle",
            "fill": "white"
          },
          attr: {
            dy: "65px"
          },
          centralClick: function() {
            alert("Here is more details!!");
          }
        }
      }, {
        name: "lines",
        options: {
          format: [{ // Line #0
            textField: "count",
            classed: {
              count: true
            },
            style: {
              "font-size": "28px",
              "font-family": "Source Sans Pro, sans-serif",
              "text-anchor": "middle",
              fill: "white"
            },
            attr: {
              dy: "0px",
              x: function(d) {
                return d.cx;
              },
              y: function(d) {
                return d.cy;
              }
            }
          }, { // Line #1
            textField: "text",
            classed: {
              text: true
            },
            style: {
              "font-size": "14px",
              "font-family": "Source Sans Pro, sans-serif",
              "text-anchor": "middle",
              fill: "white"
            },
            attr: {
              dy: "20px",
              x: function(d) {
                return d.cx;
              },
              y: function(d) {
                return d.cy;
              }
            }
          }],
          centralFormat: [{ // Line #0
            style: {
              "font-size": "50px"
            },
            attr: {}
          }, { // Line #1
            style: {
              "font-size": "30px"
            },
            attr: {
              dy: "40px"
            }
          }]
        }
      }]
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Hello Bubble Chart</title>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
  <script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
  <script src="../js/BubbleAnimated.js"></script>
  <style>
    .bubbleChart {
      min-width: 100px;
      max-width: 700px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg {
      background: #000000;
    }
  </style>
</head>
<body style="background: #000000">
  <div class="bubbleChart" />
</body>
</html>

错误

未捕获的语法错误：意外的标识符气泡动画.js

* Can anyone help me solve this problem 
Bare with me if problem is silly*

所以我想根据我拥有的 JSON 使用这段代码.我想替换代码中嵌入的数据，以将其替换为我也有相同数据的 json 文件

你的问题是一些人在第一次处理 JavaScript 中的回调时的基本误解。我会在回调上阅读一些内容。回调通常用作在将来某个时间获取数据的异步方式。您将一个函数传递给处理回调的函数，并且在将来数据准备就绪时，它会将其传递给该函数，以便您可以使用它。

因此，要获取数据并使用它而不是这个：

var data=  d3.json("../AnimateBubble.json", function() {});
// trying to use the data here wouldn't be what you expect

你会这样做：

d3.json("../AnimateBubble.json", function(data) {
  // use the data here inside this function
});
// trying to use the data out here wouldn't work as it's not in scope

所以你的例子看起来更像这样：

$(document).ready(function() {
  d3.json("../AnimateBubble.json", function(data) {
    var bubbleChart = new d3.svg.BubbleChart({
      ...
      radiusMin: 50,
      //radiusMax: use @default
      //intersectDelta: use @default
      //intersectInc: use @default
      //circleColor: use @default
      data: data,
      plugins: [{
       ...
      }]
    });
  });
});

... 是为了简洁起见，您应该将它们替换为该位置的代码。

编辑：

作为关于回调的说明，这里有一个简单的相当无用的回调示例（除了它可以教的内容）。

function timeout1000 (cb) {
    setTimeout(function () {
      if(typeof cb === "function") {
        cb(100) // this 100 is passed to the callback function's first parameter
      }
    }, 1000)
}
timeout1000(function(data) {
  console.log(data) // 100 is logged
});
// note how the function is being passed into timeout1000 as cb

JS斌演示

d3.json方法调用您发送给它的函数的方式非常相似。作为旁注，传递到回调中的数据完全取决于处理回调的函数（在您的示例中d3.json，在此人为示例中timeout1000）决定如何发送回调。

编辑

这是您的 JSON 字符串化。我会像那样复制它并将其放入 JSON 文件中。您还忘记了上面的代码示例中的结尾大括号}，所以我添加了它。

{"items":[{"text":"Java","count":"236"},{"text":".Net","count":"382"},{"text":"Php","count":"170"},{"text":"Ruby","count":"123"},{"text":"D","count":"12"},{"text":"Python","count":"170"},{"text":"C/C++","count":"382"},{"text":"Pascal","count":"10"},{"text":"Something","count":"170"}]}

这就是我将javascript对象转换为正确的JSON的方式。我只是在浏览器控制台中快速完成。您只需要将所需的对象作为 JSON 传递即可JSON.stringify() 

JSON.stringify({
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ]
});
相关文章：