2016-03-28 2 views
0

Я успешно могу вывести координаты последних случайно сгенерированных точек (randomX, randomY) внутри цикла for, но я не могу показать все из них, которые будут зависеть от того, сколько пользователей хочет , Любая помощь будет оценена по достоинству. Благодарю. Вы можете увидеть живой проект здесь http://math.mercyhurst.edu/~cmihna/DataViz/D3Chart.htmlвыводя переменные массива javascript

<!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> 
+0

try put 'document.write (randomX +', '+ randomY)' внутри цикла for – KiiroSora09

+0

Я уже пробовал, что он не работает – Thesystem32

+0

Тогда, пожалуйста, обновите сообщение о том, что вы уже пробовали, чтобы мы не были угадывание. Вы пытались помещать объявление 'var dataset = []' вне цикла for и прокручивать его в конце (после 'document.write (out)') для вывода каждого элемента массива 'набор данных'? – KiiroSora09

ответ

0

fgured это, индивидуальный цикл

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

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


     } 
1

Я знаю, вы уже поняли, но это важно объяснить: JavaScript не имеет блок сферы (если вы не используете let - см. комментарии ниже). Это означает, что во внутреннем цикле var i во внешнем контуре совпадает с var i. Таким образом, он все время сбрасывается, и цикл никогда не завершается.

Обычно, когда у нас есть две петли внутри друг друга, мы используем var i и var j.

+0

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let –

+0

Да , Я помнил, что когда я писал ответ, но это ECMA 6, верно? Какие браузеры принимают это? –

+0

Mozilla я считаю .. :) –

Смежные вопросы