Question

我能够成功输出for循环中最后一个随机生成的点（randomX，randomY）的坐标，但我似乎无法输出所有这些都取决于用户想要的数量。任何帮助，将不胜感激。谢谢。您可以在此处查看实时项目http://math.mercyhurst.edu/~cmihna/DataViz/D3Chart.html

<!doctype html>

<html>
<head>
    <script src="http://math.mercyhurst.edu/~lwilliams/js/d3.js"></script>

    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: purple;

        }

        .axis text {
            font-family: sans-serif;
            font-size:10px;
        }
    </style>


</head>




<body>

    <h1> D3 Scatter Plot</h1>



    <script align='center' >

        // create variables for the size of the SVG area that D3 will create
        var w = 800
        var h = 600



        var pad = { left: 50, top: 50, bottom: 20, right: 20 }

        var chartHeight = h - pad.top - pad.bottom
        var chartWidth = w - pad.left - pad.right


        var n = prompt("Enter the number of rolls")


        for (var i = 0; i <n; i++)
        {

            var dataset = []


            for (var i = 0; i < n; i++) 

            {
            var randomX = Math.round(Math.random()*w)
            var randomY = Math.round(Math.random()*h)
            var randomR = Math.round(Math.random()*20)



            dataset.push([randomX,randomY,randomR])



            }

            document.write(randomX + ' , ' + randomY)


            console.log(dataset)

        }





        var xscale = d3.scale.linear() 
            .domain([0, d3.max( dataset, function(d) { return d[0] } )])
            .range([0,chartWidth])

        var yscale = d3.scale.linear()
            .domain([0, d3.max( dataset, function(d) { return d[1] } )])
            .range([chartHeight,0])





        var scatterSVG = d3.select("body")
            .append('svg')
            .attr('width', w)
            .attr('height', h)




        scatterSVG.selectAll('circle')
            .data(dataset)
            .enter()
            .append('circle')
            .attr('cx', function(d){ return xscale(d[0]) + pad.left })
            .attr('cy', function(d){ return yscale(d[1]) + pad.top })
            .attr('r', function(d){ return d[2] })
            .attr('fill', function(d) {
                return 'rgb(0,'+d[0]+','+d[1]+')'
            })



        var yAxis = d3.svg.axis()   
            .scale(yscale)
            .orient('left')
            .ticks(6)

        var yAxisObject = scatterSVG.append('g')
            .call(yAxis)
            .attr("class", "axis")
            .attr("transform", 'translate('+pad.left+','+pad.top+')')

        var xAxis = d3.svg.axis()
            .scale(xscale)
            .orient('bottom')
            .ticks(3)

        var xAxisObject = scatterSVG.append('g')
            .call(xAxis)
            .attr("class","axis")
            .attr("transform", 'translate('+pad.left+','+(h-pad.bottom)+')')




            var out = "Here are the coordinates from your " + n + " rolls: ";

            document.write(out)


        </script>






</body>

<footer>

<br>
<br>
<br>
<br>
<input type="button" value="Enter New Number" onClick="window.location.href=window.location.href">

</footer>


</html>

Answer 1

我知道你已经弄明白了，但重要的是要解释一下：JavaScript没有阻止范围（除非你使用let - 请参阅下面的评论）。这意味着外循环中的var i与内循环中的var i相同。所以，它一直在重置，循环永远不会完成。

通常情况下，当我们在另一个内部有两个循环时，我们使用var i和var j。

Answer 2

把它弄出来，分开循环

for (var i = 0; i <n; i++)
        {

        document.write("(" + dataset[i] + ")")


        }

输出数组变量javascript

2 个答案: