Question

我对D3，javascript和Stackoverflow有点新意，我正在努力使多个onclick事件可用于条形图。更具体地说，我想让图表中的条形高一点，然后在点击其他地方后能够变得更高。以下是我的代码。最后，我还希望能够让它们按照它们最初的升序重新排列，这是通过单击第一个列表子项触发的。我已尝试在点击事件上加入更多内容。复制我为第二个或第三个孩子的第一个列表子项所放的东西并没有伤害任何东西，但是当我尝试制作实际的相应变量时，它会让事情变得混乱，而svg甚至都没有显示出来。我应该以不同于Ascending顺序的方式构建我的变量吗？

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

Answer 1

最好不要使用多个单击事件，而是使用单击事件，该事件根据条的当前状态有条件地运行。您可以将当前状态保存为类（.shortbar，.tallbar等），或者可能保存在每个条的基准中。

D3-多个onclick事件

1 个答案: