使用D3中的單選按鈕進行數據切換

我有一個基於引導單選按鈕觸發的單條轉換的簡單可視化。這裏是代碼：使用D3中的單選按鈕進行數據切換

<body> 
<div> 
    <svg class="chart tank-chart"></svg> 
    <form> 
     <div class="btn-group" id="months" data-toggle="buttons"> 
      <label class="btn btn-primary active"> 
       <input type="radio" name="options" value="0" autocomplete="" checked> January 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="1" autocomplete="off"> February 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="2" autocomplete="off"> March 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="3" autocomplete="off"> April 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="4" autocomplete="off"> May 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="5" autocomplete="off"> June 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="6" autocomplete="off"> July 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="7" autocomplete="off"> August 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="8" autocomplete="off"> September 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="9" autocomplete="off"> October 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="10" autocomplete="off"> November 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" value="11" autocomplete="off"> December 
      </label> 
     </div> 
    </form> 
</div> 
<script type="text/javascript"> 
    "use strict"; 
    var w = 600; 
    var h = 400; 
    var dataset = [2000, 4000, 6000, 8000, 10000, 15000, 18000, 23450, 28000, 30000, 33000, 35000]; // tank levels 
    var tank = 35000; // maximum size 
    var barwidth = 150; // tank width 
    var maxheight = 175; 
    var animationDuration = 700; 


    var svg = d3.select(".tank-chart") 
     .attr("width", w) 
     .attr("height", h); 

    var bar = svg.append("rect") 
     .attr("class", "bar") 
     .attr("x", 200) 
     .attr("y", maxheight) 
     .attr("width", barwidth) 
     .attr("height", maxheight*(dataset[0]/tank)) 
     .attr("fill", 'blue'); 


    $("#months").click(function(){ 
      var radioValue = $("input[name='options']:checked").val(); 
      bar.transition() 
       .duration(animationDuration) 
       .attr("height", maxheight*(dataset[radioValue]/tank)) 
       .attr("fill", 'blue'); 
    }); 

</script> 
</body> 
</html>

我面對的問題是酒吧是倒置的。事做「Y」值我不知道

我是新來的D3。我在這裏做錯了什麼？謝謝！

來源

2017-05-02 Ramprasath

的座標系'SVG'在頂部有0，你應該使用'.attr（「Y」，maxheight-maxheight *（數據集[radioValue] /罐））'。 – Marcelo

@Marcelo我嘗試過，仍然酒吧倒過來。您可以查看編輯後的問題 – Ramprasath

這裏是你應該怎麼設置y屬性rect元素：

"use strict"; 
 
    var w = 600; 
 
    var h = 200; 
 
    var dataset = [2000, 4000, 6000, 8000, 10000, 15000, 18000, 23450, 28000, 30000, 33000, 35000]; // tank levels 
 
    var tank = 35000; // maximum size 
 
    var barwidth = 150; // tank width 
 
    var maxheight = 175; 
 
    var animationDuration = 700; 
 

 

 
    var svg = d3.select(".tank-chart") 
 
     .attr("width", w) 
 
     .attr("height", h); 
 

 
    var bar = svg.append("rect") 
 
     .attr("class", "bar") 
 
     .attr("x", 200) 
 
     .attr("y", maxheight- maxheight*(dataset[0]/tank)) 
 
     .attr("width", barwidth) 
 
     .attr("height", maxheight*(dataset[0]/tank)) 
 
     .attr("fill", 'blue'); 
 

 

 
    $("#months").click(function(){ 
 
      var radioValue = $("input[name='options']:checked").val(); 
 
      bar.transition() 
 
       .duration(animationDuration) 
 
       .attr("height", maxheight*(dataset[radioValue]/tank)) 
 
       .attr("y", maxheight- maxheight*(dataset[radioValue]/tank)) 
 
       .attr("fill", 'blue'); 
 
    });

<div> 
 
    <svg class="chart tank-chart"></svg> 
 
    <form> 
 
     <div class="btn-group" id="months" data-toggle="buttons"> 
 
      <label class="btn btn-primary active"> 
 
       <input type="radio" name="options" value="0" autocomplete="" checked> January 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="1" autocomplete="off"> February 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="2" autocomplete="off"> March 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="3" autocomplete="off"> April 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="4" autocomplete="off"> May 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="5" autocomplete="off"> June 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="6" autocomplete="off"> July 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="7" autocomplete="off"> August 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="8" autocomplete="off"> September 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="9" autocomplete="off"> October 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="10" autocomplete="off"> November 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
       <input type="radio" name="options" value="11" autocomplete="off"> December 
 
      </label> 
 
     </div> 
 
    </form> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

來源

2017-05-02 16:46:10 Marcelo

完美！謝謝 – Ramprasath

使用D3中的單選按鈕進行數據切換

回答

相關問題