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

Question

我正在尝试通过使用 D3plus 和 uploading/storing JSON 数据创建一个箱线图到一个变量 jQuery:

<!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 文件中获取数据时，它不起作用。我收到错误："Box Plot visualizations require setting the "数据“方法”。

这是我的文件结构：

这是我的 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 调用之后 "success" 的值是一个将在异步响应为 return 之后调用的函数（因此传递给该函数的 data 参数）。没有检查 D3 的东西是否有效，但这应该可以解决你的 AJAX 调用问题。

Answer 2

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

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 文件

I am trying to load a JSON file to be used in a D3 plus visualization using jQuery

javascript

jquery

json

d3.js

d3plus