0

我正在尝试通过使用 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 数据复制并粘贴到文件中，它就可以工作。但是，当我尝试从存储在“Data”文件夹中的外部 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>
4

2 回答 2

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 调用问题。

于 2016-10-10T00:24:57.527 回答
1

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

于 2017-04-23T18:21:13.277 回答