文章/答案/技术大牛

发布

社区首页 >问答首页 >使用外部json文件使用d3js创建气泡图

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

Stack Overflow用户

提问于 2016-03-11 08:32:08

回答 1查看 1.6K关注 0票数 2

我是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() {

完整的密码就在这里

BubbleAnimated.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>

误差

Uncaught :意外标识符BubbleAnimated.js

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

因此，我想按照我所拥有的json使用这段代码。我想替换嵌入在代码中的数据，用json文件替换它，我也用相同的数据替换它。

d3.js

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-11 09:03:47

您的问题是一些人第一次在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 Bin Demo

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"},
      ]
});

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35935495

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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