D3-多個onclick事件

我對D3，javascript和Stackoverflow有點新，我試圖讓多個onclick事件可用於條形圖。更具體地說，我想讓圖表中的酒吧變得更高一些，然後在其他地方點擊後能夠變得更高。以下是我的代碼到目前爲止。最後，我還希望能夠按照原來的順序重新排列條形，因爲它們按升序排列，我通過單擊第一個列表子項來觸發。我嘗試了更多點擊事件。重複我爲第二個或第三個孩子的第一個孩子列出的內容並不會傷害任何東西，但是當我嘗試製作實際的相應變量時，它會混亂並且svg甚至不顯示。我應該以不同於我對升序的方式構建變量嗎？D3-多個onclick事件

<!DOCTYPE html> 
<html> 
<head> 

<style> 

svg { 
margin-left:25%; 
} 


rect:hover { 
fill:red; 
fill-opacity:1.0; 
} 


</style> 

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


</head> 

<body> 

<ul> 
<li>Ascending</li> 
<li>Grow</li> 
<li>Grow More</li> 
<li>Back to Normal Size</li> 
</ul> 

<script> 
//Width and height 
      var h = 250; 
      var nh = 250; 
      var w = 500;    
      var barPadding = 5; 

var dataset = [ 
5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25]; 

var o = d3.scale.linear() 
        .domain([25,0]) 
        .range ([.25,.75])     

var xScale = d3.scale.ordinal() 
          .domain(d3.range(dataset.length)) 
          .rangeRoundBands([0, w], 0.05); 

var yScale = d3.scale.linear() 
          .domain([0, d3.max(dataset)]) 
          .range([0, h - 150]); //the higher the number subtracted the shorter the bars are 

var yScale2 = d3.scale.linear() 
          .domain([0, d3.max(dataset)]) 
          .range([0, h - 100]); 

var yScale3 = d3.scale.linear() 
          .domain([0, d3.max(dataset)]) 
          .range([0, h - 50]);        


//Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 


      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { 
        return xScale(i); 

       }) 
       .attr("y", function(d) { 
        return h - yScale(d) + 3; //adding a number makes the bar chart go up 
       })       
       //code below is supposed to make bar width dependent on data value. 

      .attr("width", function(d) {return d - 2; }) //xScale.rangeBand() 


       .attr("height", function(d) { 
        return yScale(d); 

       })       
       .attr("fill","rgb(0,0,200)") 
       .attr("fill-opacity", function(d) {return o (d)}) 

       d3.select("li:nth-child(1)") 

       .on("click", function() { 
        asCend(); 
       }); 


      svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .text(function(d) {return d;})      
       .attr("x", function(d, i) { 
       return xScale(i) + xScale.rangeBand()/2; 
       }) 
       .attr("y", function(d) { 
       return h - yScale(d) 
       })    
       .attr("font-family", "sans-serif") 
       .attr("font-size", "11px") 
       .attr("fill", "red"); 


      var asCend = function() { 

       svg.selectAll("rect") 
        .sort(function(a, b) { 
         return d3.ascending(a, b); 
        }) 
        .transition() 
        .duration(1000) 
        .attr("x", function(d, i) { 
         return xScale(i); 
        })//; 


        svg.selectAll("text")     
        .sort(function(a, b) {      
          return d3.ascending(a, b);      
        }) 

        .transition() 
        .delay(function(d, i) { 
         return i * 50; 
        }) 
        .duration(1000) 
        .attr("x", function(d, i) { 
         return xScale(i); 
        }); 


      };   

</script> 

</body> 

</html>

來源

2013-10-29 user2892930

而不是使用多個點擊事件，它可能是更好的使用該行爲會有條件基於線條的當前狀態的一次點擊事件。您可以將當前狀態保存爲類（.shortbar，.tallbar等），或者可能保存在每個條的數據中。

來源

2013-10-29 05:18:33

非常感謝Scott。在這一點上，我可以嘗試一下......我的酒吧在svg中，但我仍然熟悉如何使用不同的類來管理svg。但是，再次感謝你。 – user2892930

D3-多個onclick事件

回答

相關問題