2013-04-03 63 views
0


我如何從這個php文件中獲取值?

我最近進入了d3 javascript庫。

我已經從一個陣列

這裏抓起隨機值的散點圖是代碼

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
    <script type="text/javascript" src="d3.v3.js"></script> 
    <style> 
     .axis path, 
     .axis line 
     { 
      fill: none; 
      stroke: black; 
      shape-rendering: crispEdges; 
     } 

     .axis text 
     { 
      font-family: sans-serif; 
      font-size: 11px; 
     } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 

     //Width and height 
     var w = 500; 
     var h = 300; 
     //fix padding issues 
     var padding = 30; 

     //var dataset = [ 
      //   [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
       //  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150], [77, 69], [290, 68] 

        // ]; 

     var dataset = []; 
     var numDataPoints = 50; 
     var xRange = Math.random() * 1000; 
     var yRange = Math.random() * 1000; 
     for (var i = 0; i < numDataPoints; i++) { 
      var newNumber1 = Math.round(Math.random() * xRange); 
      var newNumber2 = Math.round(Math.random() * yRange); 
      dataset.push([newNumber1, newNumber2]); 
      } 

     //Create scale functions 
     var rScale = d3.scale.linear() 
       .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
       .range([2, 5]); 

     var xScale = d3.scale.linear() 
      .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
      .range([padding, w - padding * 2]); 

     var yScale = d3.scale.linear() 
      .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
      .range([h - padding, padding]); 

     //Create SVG element 
     var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

     //create circles 
     svg.selectAll("circle") 
      .data(dataset) 
      .enter() 
      .append("circle") 
      .attr("cx", function(d) { 
       return xScale(d[0]); //use scale function 
      }) 
      .attr("cy", function(d) { 
       return yScale(d[1]); //use scale function 
      }) 
      .attr("r", function(d) { 
       return rScale(d[1]); 
      }); 

     //create svg text 
     //svg.selectAll("text") 
     // .data(dataset) 
     // .enter() 
     // .append("text") 
     // .text(function(d) { 
     //   return d[0] + "," + d[1]; 
     // }) 
     // .attr("x", function(d) { 
     //   return xScale(d[0]); 
     // }) 
      // .attr("y", function(d) { 
     //   return yScale(d[1]); 
     // }) 
     // .attr("font-family", "sans-serif") 
      // .attr("font-size", "11px") 
      // .attr("fill", "red"); 

     //create axis 
     var xAxis = d3.svg.axis() 
      .scale(xScale) 
      .orient("bottom") 
      .ticks(5); 
     //place axis  
     svg.append("g") 
      .attr("class", "axis") 
      .attr("transform", "translate(0," + (h - padding) + ")") 
      .call(xAxis); 

     //define y axis 
     var yAxis = d3.svg.axis() 
       .scale(yScale) 
       .orient("left") 
       .ticks(5); 
     //place y axis  
     svg.append("g") 
      .attr("class", "axis") 
      .attr("transform", "translate(" + padding + ",0)") 
      .call(yAxis); 

    </script> 
</body> 

正如你所看到的,圖形,獲得隨機產生的值並放入一個數組中。這很好,但我想做一個小小的改變。我想創建一個生成隨機數的php文件,並將其繪製成圖。

php文件是不夠

<?php 
echo rand(1, 50); 
?> 

簡單的讓我怎麼居然
1.獲取PHP文件來生成20張隨機數
2.其實把這些數字在數組中的散點圖。

謝謝!

+0

你可以在''Math.random()' – Pointy 2013-04-03 22:16:57

回答

0

這PHP代碼將這樣的伎倆:

<?php 
$i=20; 
while($i > 0) { 
    echo rand(1, 50); 
    $i--; 
} 
?> 
+0

好吧,用JavaScript生成隨機數。那很棒。但是,我怎樣才能將這些值放入html文件? – onTheInternet 2013-04-03 22:53:47

0

要生成在PHP中的隨機數,推項目到一個數組,然後回顯:

$count = 0; 
while($count < 20) { 
    $numbers[$count] = rand(1, 50); 
    $count++; 
} 
echo json_encode($numbers); 

這將產生類似:

[35,5,46,25,22,47,23,27,15,17,30,27,17,36,24,40,10,30,14,20]

使用JavaScript和AJAX,獲取PHP頁面和解析使用JSON.parse

獲取PHP頁面和解析(使用jQuery):

var random = []; 
$.get("random.php",function(data) { 
    random = JSON.parse(data); 
} 

注:PHP腳本,你也可以使用array_push,但我已經使用了上述只是因爲我們已經有一個while循環。

+0

我明白的PHP。我仍然沒有得到如何將它們實現到我的HTML文件。 – onTheInternet 2013-04-03 22:54:17

+0

@onTheInternet更新了我的答案。希望有所幫助! – 2013-04-03 22:59:35

相關問題