0


我最近进入了 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. 实际上将这些数字放入散点图的数组中。

谢谢！

4

2 回答 2

0

这个 PHP 代码可以解决问题：

<?php
$i=20;
while($i > 0) {
    echo rand(1, 50);
    $i--;
}
?>
于 2013-04-03T22:20:58.437 回答
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循环。

于 2013-04-03T22:23:21.717 回答