我正在嘗試使用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