從 mysql 和 json 和 plot 和 D3 獲取數據

Question

我正在嘗試使用 d3 處理 plot mysql 數據。 我正在使用 php 轉換為 json 格式。 出於測試目的，我按照此處的步驟操作，並在 XAMPP 上使用了我自己的 php 文件。 但是當我在瀏覽器中打開 html 文件時，它總是顯示一個白頁。

<?php
$mysqli  = mysqli_connect("$host, $username, $password, $dbname");
$mysqli ->set_charset('utf8mb4');
$myArray = array();
 
if($result = $mysqli ->query("SELECT  `date`, `volume` FROM  `sensordata`"))
{
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) 
    {
    $myArray[] = $row;
    }
    header("Content-Type: application/json");
    echo json_encode($myArray);
}
$result->close();
$mysqli ->close();
?>

它以 json 格式回顯，如下所示：

[{“日期”：“02-04-2021”，“音量”：“606.51”}，{“日期”：“03-04-2021”，“音量”：“700.51”}]

我使用網站上的以下代碼：

<!DOCTYPE html>
<meta charset="utf-8">
<html lang = "en">
    <style> /* set the CSS */

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
    
    </style>

<body>
<script src="d3/d3.js"></script>
    
<script>
// set the dimensions and margins of the graph
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

// parse the date / time
  var parseTime = d3.timeParse("%d-%m-%Y");

// set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

// define the line
  var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.volume); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json("get_data.json", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.volume = +d.volume;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.volume; })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x)
      .tickFormat(d3.timeFormat("%d-%m-%Y")));
  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});
  </script>
</body>

如果我使用這樣的變量：

var data = [
    {date:"30-05-12",volume:"123"},
    {date:"27-05-12",volume:"67.00"},
    {date:"26-06-12",volume:"89.70"},
    {date:"25-07-12",volume:"99.00"}
];

而不是這部分：

// Get the data
d3.json("get_data.json", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.volume = +d.volume;
  });

一切都很好，數據被繪制出來。

所有文件都在同一個文件夾中。

有人可以幫我嗎？

Answer 1

您在此處請求 JSON 文件，而不是您的 PHP 文件：

d3.json("get_data.json", ...)

因此，您可能需要提前請求 PHP 文件，或將 JSON 數據寫入 *.json 文件：

if($result = $mysqli ->query("SELECT  `date`, `volume` FROM  `sensordata`"))
{
    ...
    file_put_contents('get_data.json', json_encode($myArray));
}

此外，您給出的 PHP output 和硬編碼的日期格式（“02-04-2021”與“30-05-12”）之間的日期格式不同。 如果您喜歡使用后者，您可能需要調整代碼的日期格式字符串（假設 d3.js 也使用它來解析日期）：

var parseTime = d3.timeParse("%d-%m-%y")

對於 d3.json()，另見他們的文檔。

Answer 2

我想我在 D3 5.0 中得到了它，他們改變了d3.json的語法，使用新語法我的代碼如下所示：

d3.json("get_data.php").then(function(data) {
  
  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.volume = +d.volume;
  });

舊代碼：

d3.json("get_data.json", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.volume = +d.volume;
  });

現在數據被繪制出來了。

從 mysql 和 json 和 plot 和 D3 獲取數據

問題描述

2 個解決方案

解決方案1
0 2021-04-04 00:16:47

解決方案2
0 2021-04-04 08:36:39

從 mysql 和 json 和 plot 和 D3 獲取數據

問題描述

2 個解決方案

解決方案1 0 2021-04-04 00:16:47

解決方案2 0 2021-04-04 08:36:39

解決方案1
0 2021-04-04 00:16:47

解決方案2
0 2021-04-04 08:36:39