我正在尝试使用jQuery加载要在D3 plus可视化中使用的JSON文件

Question

我正在尝试通过使用D3plus并使用jQuery将JSON数据上传/存储到变量中来创建箱线图：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
    <script src="./JS/d3.min.js"></script>
    <script src="./JS/d3plus.min.js"></script>
    <script src="./JS/jQuery.min.js"></script>  
</head>
<body>

<div id="viz"></div>

<script>
  var data;

  $.getJSON("./Data/boxplot.json", function(json) {
      data = json;
  });
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("box")
    .id("name")
    .x("building")
    .y("total")
    .time(false)
    .height(800)
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw()
</script>

</body>
</html>

如果我将json数据复制并粘贴到文件中，它将起作用。 但是，当我尝试从存储在“数据”文件夹中的外部json文件中获取数据时，它不起作用。 我收到错误消息：“箱形图可视化需要设置“数据”方法”。

这是我的文件结构：

这是我的json文件：

[{"building":"MMB","name":"Shane","total":1},{"building":"MMB","name":"Geneviève, Bérubé","total":1},{"building":"MMB","name":"Dana","total":10},{"building":"MMB","name":"karine","total":2},{"building":"MMB","name":"Anthony","total":1},{"building":"MMB","name":"Erwin","total":6},{"building":"MMB","name":"Jake","total":2},
{"building":"MMB","name":"Karen","total":1},{"building":"MMB","name":"sabrina","total":2},{"building":"MMB","name":"Jeannine","total":4}]

非常感谢您的宝贵时间！

编辑：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
    <script src="./JS/d3.min.js"></script>
    <script src="./JS/d3plus.min.js"></script>
    <script src="./JS/jQuery.min.js"></script>  
</head>
<body>

<div id="viz"></div>

<script>

 $.getJSON("./Data/boxplot.json", function(json) {
  data = json,
  success = function(data){
    .container("#viz")
    .data(data)
        .type("box")
        .id("name")
        .x("building")
        .y("total")
        .time(false)
        .height(800)
        .ui([{ 
            "label": "Visualization Type",
            "method": "type", 
            "value": ["scatter","box"]
        }])
        .draw()
  }
})
</script>

</body>
</html>

Answer 1

$.getJSON("./Data/boxplot.json", function(json) {
  data = json,
  success = function(data){
    d3plus.viz()
      .container("#viz")
      .data(data)
      .type("box")
      .id("name")
      .x("building")
      .y("total")
      .time(false)
      .height(800)
      .ui([{ 
          "label": "Visualization Type",
          "method": "type", 
          "value": ["scatter","box"]
      }])
      .draw()
   }
})

这样的事情应该起作用。 在您的getJSON调用之后，“成功”的值是一个函数，该函数将在异步响应返回后被调用（因此将data参数传递给该函数）。 没检查D3东西是否起作用，但这应该可以解决您的AJAX呼叫问题。

Answer 2

D3plus支持从JSON文件加载数据。 只需将路径传递给data方法：

var visualization = d3plus.viz()
    .container("#viz")
    .data("./Data/boxplot.json")
    .type("box")
    .id("name")
    .x("building")
    .y("total")
    .time(false)
    .height(800)
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw();

作为参考，以下是可以为数据方法设置的所有自定义属性： https : //github.com/alexandersimoes/d3plus/wiki/Visualizations#data

我正在尝试使用jQuery加载要在D3 plus可视化中使用的JSON文件

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-10-10 00:24:57

解决方案2
1 2017-04-23 18:21:13

我正在尝试使用jQuery加载要在D3 plus可视化中使用的JSON文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-10-10 00:24:57

解决方案2 1 2017-04-23 18:21:13

解决方案1
1 已采纳 2016-10-10 00:24:57

解决方案2
1 2017-04-23 18:21:13