2013-04-03 22 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

相关问题