Интервал перерисовки D3

Question

У меня есть карта радара D3 с текущей настройкой. Файл 'phpmysqlconnect. php' / include, который выполняет запрос PDO SQL. AJAX fetchdata с интервалом, который, кажется, работает и отображается в журнале консоли. Сейчас я пытаюсь / хочу, чтобы диаграмма радара перерисовывалась при каждом изменении данных или задании фиксированного интервала времени.

В любом случае, чтобы сделать это?

home. php

<?php include 'phpmysqlconnect.php' ?>

<script>
    function fetchdata(){
     $.ajax({
      url: 'phpmysqlconnect.php',
      type: 'post',
      success: function(data){

       // Set result to div or target 
            $('#my-result').html(data); 
      }
     });
    }
    // interval fetch
    $(document).ready(function(){
     setInterval(fetchdata,5000);
    });
</script>

<!-- show results -->
<div id="my-result"></div>

<div class="radarChart"></div>
<script src="radarChart.js"></script>

<script>

/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */

    ////////////////////////////////////////////////////////////// 
    //////////////////////// Set-Up ////////////////////////////// 
    ////////////////////////////////////////////////////////////// 

    var margin = {top: 100, right: 100, bottom: 100, left: 100},
        width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
        height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

    ////////////////////////////////////////////////////////////// 
    ////////////////////////// Data ////////////////////////////// 
    ////////////////////////////////////////////////////////////// 


    var data = [
              [
                {axis:"Battery Life",value:<?php echo json_encode($data[0]['field_18']) ?>},
                {axis:"Brand",value:<?php echo json_encode($data[0]['field_19']) ?>},
                {axis:"Contract Cost",value:<?php echo json_encode($data[0]['field_20']) ?>},
                {axis:"Design And Quality",value:<?php echo json_encode($data[0]['field_21']) ?>},
                {axis:"Have Internet Connectivity",value:<?php echo json_encode($data[0]['field_22']) ?>},
                {axis:"Large Screen",value:<?php echo json_encode($data[0]['field_23']) ?>},
                {axis:"Price Of Device",value:1},
                {axis:"To Be A Smartphone",value:2}
              ]
            ];

    ////////////////////////////////////////////////////////////// 
    //////////////////// Draw the Chart ////////////////////////// 
    ////////////////////////////////////////////////////////////// 

    var color = d3.scale.ordinal()
        .range(["#EDC951","#CC333F","#00A0B0"]);

    var radarChartOptions = {
      w: width,
      h: height,
      margin: margin,
      maxValue: 5,
      levels: 5,
      roundStrokes: false,
      color: color
    };
    //Call function to draw the Radar chart
    RadarChart(".radarChart", data, radarChartOptions);

</script>

phpmysqlconnect. php

<?php
  require_once 'dbconfig.php';
    try {
        //PDO is a extension which  defines a lightweight, consistent interface for accessing databases in PHP.
        $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
        // prepare the sql query
        $sql = 'SELECT cast(avg(field_18) as unsigned) AS field_18, cast(avg(field_19) as unsigned) AS field_19, cast(avg(field_20) as unsigned) AS field_20, cast(avg(field_21) as unsigned) AS field_21, cast(avg(field_22) as unsigned) AS field_22, cast(avg(field_23) as unsigned) AS field_23 FROM rstutdmkgk.craft_freeform_submissions WHERE formId =1';
        $row = $pdo->prepare($sql);
        //execute the query
        $row->execute();
        //create the array 
        $data=array();  
            //foreach loop
            foreach($row as $rec)  
            {
                    $json_array['field_18']=$rec['field_18']; 
                    $json_array['field_19']=$rec['field_19'];
                    $json_array['field_20']=$rec['field_20']; 
                    $json_array['field_21']=$rec['field_21'];
                    $json_array['field_22']=$rec['field_22'];
                    $json_array['field_23']=$rec['field_23'];
                    //here pushing the values in to an array  
                    array_push($data,$json_array);
            }
    } catch (PDOException $pe) {
        die("Could not connect to the database $dbname :" . $pe->getMessage());
    }
?>

<script>
  // Echo the data directly to JavaScript
  var data = <?php echo json_encode($data) ?>;
  // console log
  console.log('<?php echo json_encode($data[0]['field_18']) ?>')
  console.log(data[0]['field_18']); // field 18
  console.log(data[0]['field_19']); // field 19
  console.log(data[0]['field_20']); // field 20
  console.log(data[0]['field_21']); // field 21
  console.log(data[0]['field_22']); // field 22
  console.log(data[0]['field_23']); // field 23
</script>

Редактировать дом. php

    var color = d3.scale.ordinal()
        .range(["#EDC951","#CC333F","#00A0B0"]);

    var radarChartOptions = {
      w: width,
      h: height,
      margin: margin,
      maxValue: 5,
      levels: 5,
      roundStrokes: false,
      color: color
    };
    //Call function to draw the Radar chart
    radarChart = RadarChart("#radarChart", data, radarChartOptions);

     d3.select("#radarChart")
       .call(radarChart);

     radarChart.options(radarChartOptions).update();

консоль для дома. php

Uncaught TypeError: Cannot read property 'apply' of undefined
    at Array._a.call (d3.min.js:3)
    at <anonymous>:53:6
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)

Answer 1

Вот фрагмент с той же версией, с которой вы сейчас работаете, но этот фрагмент не включает в себя вызов Ajax, поэтому проверьте второй фрагмент для вызова Ajax (который, я не уверен, будет работать, так как вы не включили свой php код).

/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */

////////////////////////////////////////////////////////////// 
//////////////////////// Set-Up ////////////////////////////// 
////////////////////////////////////////////////////////////// 

var margin = {top: 100, right: 100, bottom: 100, left: 100},
  width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
  height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

////////////////////////////////////////////////////////////// 
////////////////////////// Data ////////////////////////////// 
////////////////////////////////////////////////////////////// 

var data = [
      [//iPhone
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}			
      ],[//Samsung
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
      ],[//Nokia Smartphone
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
      ]
    ];
////////////////////////////////////////////////////////////// 
//////////////////// Draw the Chart ////////////////////////// 
////////////////////////////////////////////////////////////// 

var color = d3.scale.ordinal()
  .range(["#EDC951","#CC333F","#00A0B0"]);

var radarChartOptions = {
  w: width,
  h: height,
  margin: margin,
  maxValue: 0.5,
  levels: 5,
  roundStrokes: true,
  color: color
};
//Call function to draw the Radar chart
RadarChart(".radarChart", data, radarChartOptions);

setInterval(function() {
  var data = [
      [//iPhone
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}			
      ],[//Samsung
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
      ],[//Nokia Smartphone
      {axis:"Battery Life",value: (Math.random() * 100) / 100},
      {axis:"Brand",value: (Math.random() * 100) / 100},
      {axis:"Contract Cost",value: (Math.random() * 100) / 100},
      {axis:"Design And Quality",value: (Math.random() * 100) / 100},
      {axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
      {axis:"Large Screen",value: (Math.random() * 100) / 100},
      {axis:"Price Of Device",value: (Math.random() * 100) / 100},
      {axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
      ]
    ];
    RadarChart(".radarChart", data, radarChartOptions);
}, 1000)

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  fill: #242424;
  text-align: center;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  cursor: default;
}

.legend {
  font-family: 'Raleway', sans-serif;
  fill: #333333;
}

.tooltip {
  fill: #333333;
}

<script src="https://gist.githubusercontent.com/nbremer/21746a9668ffdf6d8242/raw/980dda56c87a6813fc4ba527ec7db0b53e83dbb5/radarChart.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
		<title>Smoothed D3.js Radar Chart</title>

		<!-- Google fonts -->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

		<!-- D3.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	
	</head>
	<body>

		<div class="radarChart"></div>

		<script src="http://bl.ocks.org/nbremer/raw/21746a9668ffdf6d8242/980dda56c87a6813fc4ba527ec7db0b53e83dbb5/radarChart.js"></script>	
	</body>
</html>

Обновление: вот рабочая версия графика с кодом php, я смоделировал данные в phpmysqlconnect.php, удалил скрипт определение в phpmysqlconnect.php, поскольку ваши данные не определены в PHP, вы можете просто использовать echo json_encode($data);

, обратите внимание, что вы должны вернуть Array из Array из Objects чтобы библиотека могла обрабатывать ваши данные .

Home. php:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
    function fetchdata(){
     $.ajax({
      url: 'phpmysqlconnect.php',
      type: 'get',
      type: 'json',
      success: function(data){
        var radarChartOptions = {
          w: width,
          h: height,
          margin: margin,
          maxValue: 5,
          levels: 5,
          roundStrokes: false,
          color: color
        };
        RadarChart(".radarChart", JSON.parse(data), radarChartOptions);
      }
     });
    }
    // interval fetch
    $(document).ready(function(){
     setInterval(fetchdata,1000);
    });
</script>

<!-- show results -->
<div id="my-result"></div>

<div class="radarChart"></div>
<script src="radarChart.js"></script>

<script>

/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */

    ////////////////////////////////////////////////////////////// 
    //////////////////////// Set-Up ////////////////////////////// 
    ////////////////////////////////////////////////////////////// 

    var margin = {top: 100, right: 100, bottom: 100, left: 100},
        width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
        height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

    ////////////////////////////////////////////////////////////// 
    ////////////////////////// Data ////////////////////////////// 
    ////////////////////////////////////////////////////////////// 


    var data = [
      [
        {axis:"Battery Life",value: 12},
        {axis:"Brand",value: 30},
        {axis:"Contract Cost",value: 40},
        {axis:"Design And Quality", value: 15},
        {axis:"Have Internet Connectivity",value: 73},
        {axis:"Large Screen",value: 42},
        {axis:"Price Of Device",value: 20},
        {axis:"To Be A Smartphone",value: 29}
      ]
    ];

    ////////////////////////////////////////////////////////////// 
    //////////////////// Draw the Chart ////////////////////////// 
    ////////////////////////////////////////////////////////////// 

    var color = d3.scale.ordinal()
        .range(["#EDC951","#CC333F","#00A0B0"]);

    var radarChartOptions = {
      w: width,
      h: height,
      margin: margin,
      maxValue: 5,
      levels: 5,
      roundStrokes: false,
      color: color
    };
    //Call function to draw the Radar chart
    RadarChart(".radarChart", data, radarChartOptions);

</script>

phpmysqlconnect. php :

<?php
  // YOUR SQL CONNECT GOES HERE. 
  // REPLACE $data with PDO/MYSQLI QUERY DATA.
  $data =  [ [
    ( Object )["axis" => "Battery Life","value" => (rand(1, 99))],
    ( Object )["axis" => "Brand","value" => rand(1, 99)],
    ( Object )["axis" => "Contract Cost","value" => rand(1, 99)],
    ( Object )["axis" => "Design And Quality","value" => rand(1, 99)],
    ( Object )["axis" => "Have Internet Connectivity","value" => rand(1, 99)],
    ( Object )["axis" => "Price Of Device","value" => rand(1, 99)],
    ( Object )["axis" => "To Be A Smartphone","value" => rand(1, 99)],
  ] ];
echo json_encode($data);