d3js rect的過渡高度onload svg

Question

我有工作js小提琴，修改svg rect元素以模仿條形圖。我想要做的是將負載轉換爲特定基準高度的條形圖。滑塊移動時的圖形轉換，而不是頁面首次加載時的圖形轉換。

這是jsfiddle

，這裏是我的代碼

$("#slider").slider({ 
    max: 30 
}); 

$("#slider").slider({ 
    min: 10 
}); 

$("#slider1").slider({ 
    max: 25 
}); 

$("#slider1").slider({ 
    min: 10 
}); 



$("#slider, #slider1").slider({ 
    value: 10, 
    animate: "fast" , 
    slide: function (event, ui) { 
     var selection = $("#slider").slider("value"); 

     var selection1 = $("#slider1").slider("value"); 

     $("#amount1").val("$" + selection); 

     $("#amount").val("$" + selection1); 


     //console.log(selection); 
     console.log(selection1); 

     //Width and height 
     var w = 200; 
     var h = 2000; 

     //Data 
     var dataset = []; 

     var dataset1 = []; 

     //Basic Maths Here 

     dataset.push(selection * selection1); 

     dataset1.push(selection * 2); 

     console.log(dataset); 
     console.log(dataset1); 

     var rectangle = svg.selectAll("rect") 
     .classed("collapse", true) 

      .data(dataset); 

     var rectangle1 = svg1.selectAll("rect") 
     .classed("collapse1", true) 

      .data(dataset1); 



     rectangle 
      .enter() 

      .append("rect"); 


     rectangle1 
      .enter() 
      .append("rect"); 

     rectangle.attr("width", 200) 
     .transition() 
      .attr("height", function (d) { console.log('d is ' + d); 
      return d; 
     }) 
      .attr("x", function (d) { 
      return 40; 
     }) 
      .attr("y", function (d) { 
      return 40; 
     }); 

     rectangle1.attr("width", 200) 
     .transition() 
      .attr("height", function (d) { console.log('d is ' + d); 
      return d; 
     }) 
      .attr("x", function (d) { 
      return 40; 
     }) 
      .attr("y", function (d) { 
      return 40; 
     }); 


    } 
}); 


//Create SVG element 
var svg = d3.select("body") 
.append("svg") 

.attr("width", 300) 
.attr("height", 300); 

//Create SVG element 
var svg1 = d3.select("body") 
.append("svg") 
.classed("svgLeft", true) 
.attr("width", 300) 
.attr("height", 300); 

//initialize a fake graph 


var selection = 10; 

     var selection1 = 10; 

     $("#amount1").val("$" + selection); 

     $("#amount").val("$" + selection1); 


     //console.log(selection); 
     console.log(selection1); 

     //Width and height 
     var w = 200; 
     var h = 2000; 

     //Data 
     var dataset = []; 

     var dataset1 = []; 

     //Basic Maths Here 

     dataset.push(selection); 

     dataset1.push(selection1); 

     console.log(dataset); 
     console.log(dataset1); 

     var rectangle = svg.selectAll("rect") 
     .classed("collapse", true) 

      .data(dataset); 

     var rectangle1 = svg1.selectAll("rect") 
     .classed("collapse1", true) 

      .data(dataset1); 



     rectangle 
      .enter() 

      .append("rect"); 


     rectangle1 
      .enter() 
      .append("rect"); 

     rectangle.attr("width", 200) 
     .transition() 
      .attr("height", 40) 
      .attr("fill", "#92BAF5") 
      .attr("x", function (d) { 
      return 40; 
     }) 
      .attr("y", function (d) { 
      return 40; 
     }); 

     rectangle1.attr("width", 200) 
     .transition() 
    .attr("fill", "#E6E6E6") 
      .attr("height", 40) 
      .attr("x", function (d) { 
      return 40; 
     }) 
      .attr("y", function (d) { 
      return 40; 
     }); 

Answer 1

這僅僅是一個把初始高度的轉換前的問題。像這樣：

rectangle.attr("width", 200) 
    .attr("height", 0) 
    .transition().duration(750).ease("linear") 
    .attr("height", 40) 
    ... 

完成FIDDLE。