while while循環D3中的更新參數

我希望有人能夠提供幫助，我完全不熟悉javascript，但一直在學習它，以便開始在D3中生成交互式輸出。while while循環D3中的更新參數

因此，我已經開始了基礎知識，並生成了線圖等，現在我想添加一個交互元素。

所以我有一個線圖，一個滑塊和一個函數，問題是我如何鏈接它們？使用一些在線示例我瞭解如何讓滑塊更新文本等對象的屬性，但我希望它能夠更新循環中的參數以執行計算，然後運行該計算並提供折線圖輸出。

我的代碼如下，我已經註釋，我想更新循環：

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

任何幫助，將不勝感激。

來源

2016-09-10 ALs

在每個滑塊輸入事件上，您必須更新圖表的各個部分（例如，line，axisTicks等），這取決於您的數據。你可以例如擴展您的更新功能是這樣的：

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); 
}

其中drawChart（newData）看起來是這樣的：

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

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

另一種方法是聲明取決於元素作爲變量的數據，只是改變的更新自己的屬性（我會推薦）：

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

這裏是一個例子plunker。退房也example。

來源

2016-09-10 10:58:28

太棒了，非常感謝您對此的幫助。 – ALs

while while循環D3中的更新參數

回答

相關問題