Невозможно добавить переход в d3

Question

Я хочу добавить эффект перехода на вертикальную панель, которую я создал в d3. Я новичок в d3, я пробовал добавить метод перехода(), но не работал. Мой код выглядит следующим образом:

svg.selectAll(".bar") 
      .data(data) 
      .enter().append("g") 
      .attr("class", "bar") 
      .append("rect") 
      .attr("rx", barRadius) 
      .attr("fill", function(d,i) { 
       var drilledvalue; 
        try { 
         drilledvalue = JSON.parse(parent.$("#drills").val())[colIds[0]]; 
        } catch (e) { 
        } 
        if (typeof drilledvalue !== 'undefined' && drilledvalue.length > 0 && drilledvalue.indexOf(d[columns[0]]) !== -1) { 
         return drillShade; 
        } 
       if(typeof chartData[div]["transpose"] === "undefined" || chartData[div]["transpose"]=='N') 
       { 
       return getDrawColor(div, parseInt(i));//"url(#gradientBar_" + (d[columns[0]]).replace(/[^a-zA-Z0-9]/g, '', 'gi') + ")"; 
       } 
       else 
       { 
        return color(0); 
       } 
      }) 
      // .attr("color_value", "steelblue") 
      .attr("index_value", function(d, i) { 
       return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi'); 
      }) 
      .attr("class", function(d, i) { 
       return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div; 
      }) 
      .attr("id", function(d) { 
       return d[columns[0]] + ":" + d[measure1]; 
      }) 
      .attr("onclick", fun) 
      .attr("x", function(d) { 
       return x(d[columns[0]]); 
      }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { 
       return y(d[measure1]); 
      }) 
      .attr("height", function(d) { 
       return height - y(d[measure1]); 
      }); 

Я хочу, чтобы гистограмма отображалась из-под одного графика за раз. Помощь Plz.

Answer 1

Без живого примера вам немного сложно помочь. Но, имея взгляд на свой код, вы должны поставить начальную высоту в 0, а затем установить конечную высоту после перехода:

svg.selectAll(".bar") 
//all settings 
.attr("height",0) 
.transition() 
.duration(1000)//1 second 
.attr("height",function(d)(return height - y(d[measure1]);)); 

EDIT:

К сожалению, конечно, будет поступать из верхней части, вам необходимо повернуть бары. Кроме того, вам, возможно, придется переоценить расчет высоты после применения вращения

svg.selectAll(".bar") 
    //all settings 
    .attr("height",0) 
    .attr("transform", "rotate(180,x,y)"); //note y must be the bottom of the chart 
    .transition() 
    .duration(1000)//1 second 
    .attr("height",function(d)(return height - y(d[measure1]);));