mettre à jour le paramètre dans la boucle while D3

J'espérais que quelqu'un puisse m'aider, je suis complètement nouveau au javascript mais je l'ai appris pour commencer à produire des sorties interactives en D3.mettre à jour le paramètre dans la boucle while D3

J'ai donc commencé avec les bases et j'ai produit des graphiques linéaires, maintenant je veux ajouter un élément interactif.

Donc, j'ai un graphique linéaire, un curseur et une fonction, la question est de savoir comment puis-je les relier? jouer avec quelques exemples en ligne Je comprends comment je peux obtenir le curseur pour mettre à jour les attributs d'objets tels que du texte, mais je veux qu'il mette à jour les paramètres dans une boucle pour effectuer un calcul qui s'exécute.

Mon code est le suivant et j'ai annoté la boucle que je veux mettre à jour:

<!DOCTYPE html> 
<style type="text/css"> 
     path { 
      stroke-width: 2; 
      fill: none; 
     } 

     line { 
      stroke: black; 
     } 

     text { 
      font-family: Arial; 
      font-size: 9pt; 
     } 

    </style> 
<body> 

<p> 
    <label for="repRate" 
     style="display: inline-block; width: 240px; text-align: right"> 
     R = <span id="repRate-value">…</span> 
    </label> 
    <input type="range" min="0.0" max="1.0" step="0.01" id="repRate"> 
</p> 

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 


d3.select("#repRate").on("input", function() { 
    update(+this.value); 
}); 


update(0.1); 


function update(repRate) { 

    // adjust slider text 
    d3.select("#repRate-value").text(repRate); 
    d3.select("#repRate").property("value", repRate); 

} 


//This is the function I want to update when the slider moves, I want the parameter R to update 
//with the slider value, then loop through and produce a new graph 
function parHost (R){ 
var i = 0; 
var result = []; 
     do { 
     //I want to be able to keep it as a loop or similar, so that I can add more complex 
     //equations into it, but for now I've kept it simple 
     Nt1 = R*i 
     result.push(Nt1++) ; 
     Nt = Nt1 
     i++; 
     } 
     while (i < 50); 
     return result}; 



     var data = parHost(0.5), 
      w = 900, 
      h = 200, 
      marginY = 50, 
      marginX = 20, 
      y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + marginX, h - marginX]), 
      x = d3.scale.linear().domain([0, data.length]).range([0 + marginY, w - marginY]) 


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

      var g = vis.append("svg:g") 
       .attr("transform", "translate(0, 200)"); 

      var line = d3.svg.line() 
       .x(function(d,i) { return x(i); }) 
       .y(function(d) { return -1 * y(d); }) 

      g.append("svg:path").attr("d", line(data)).attr('stroke', 'blue'); 

      g.append("svg:line") 
       .attr("x1", x(0)) 
       .attr("y1", -1 * y(0)) 
       .attr("x2", x(w)) 
       .attr("y2", -1 * y(0)) 

      g.append("svg:line") 
       .attr("x1", x(0)) 
       .attr("y1", -1 * y(0)) 
       .attr("x2", x(0)) 
       .attr("y2", -1 * y(d3.max(data))) 


      g.selectAll(".xLabel") 
       .data(x.ticks(5)) 
       .enter().append("svg:text") 
       .attr("class", "xLabel") 
       .text(String) 
       .attr("x", function(d) { return x(d) }) 
       .attr("y", 0) 
       .attr("text-anchor", "middle") 

      g.selectAll(".yLabel") 
       .data(y.ticks(4)) 
       .enter().append("svg:text") 
       .attr("class", "yLabel") 
       .text(String) 
       .attr("x", 0) 
       .attr("y", function(d) { return -1 * y(d) }) 
       .attr("text-anchor", "right") 
       .attr("dy", 4) 

      g.selectAll(".xTicks") 
       .data(x.ticks(5)) 
       .enter().append("svg:line") 
       .attr("class", "xTicks") 
       .attr("x1", function(d) { return x(d); }) 
       .attr("y1", -1 * y(0)) 
       .attr("x2", function(d) { return x(d); }) 
       .attr("y2", -1 * y(-0.3)) 

      g.selectAll(".yTicks") 
       .data(y.ticks(4)) 
       .enter().append("svg:line") 
       .attr("class", "yTicks") 
       .attr("y1", function(d) { return -1 * y(d); }) 
       .attr("x1", x(-0.3)) 
       .attr("y2", function(d) { return -1 * y(d); }) 
       .attr("x2", x(0)) 





</script> 
</body>

Toute aide à ce serait très apprécié.

Source

2016-09-10 ALs

À chaque événement de saisie de curseur, vous devez mettre à jour les parties du diagramme (par exemple, line, axisTicks, etc.) qui dépendent de vos données. Vous pourriez, par exemple, étendre votre fonction de mise à jour comme celui-ci:

function update(repRate) { 
    // adjust slider text 
    d3.select("#repRate-value").text(repRate); 
    d3.select("#repRate").property("value", repRate); 

    // Generate new Data depending on slider value 
    var newData = parHost(repRate); 

    // Update the chart 
    drawChart(newData); 
}

où pourrait regarder la drawChart (newData) comme ceci:

function drawChart(newData) { 
    // Delete the old elements 
    g.selectAll("*").remove(); 

    g.append("svg:path").attr("d", line(newData)).attr('stroke', 'blue'); 
    ... 
}

Une autre méthode consiste à déclarer des données en fonction des éléments comme variables et juste changer leur attribut sur une mise à jour (que je recommande):

... 
var dataLine = g.append("svg:path"); 
... 
function drawChart(newData) { 
    path.attr("d", line(newData)).attr('stroke', 'blue'); 
}

Voici un exemple plunker. Consultez également cette example.

Source

2016-09-10 10:58:28

Fantastique, merci beaucoup pour votre aide à ce sujet. – ALs

mettre à jour le paramètre dans la boucle while D3

Répondre

Questions connexes