Transition height onload of d3js rect svg

问题:

I have working js fiddle that modifies a svg rect element to mimic a bar graph. What I am trying to do is have the bar graph on load transition into a specific base height. The graph tansitions when the slider is moved but not when the page first loads.

It is on jsfiddle

and here is my code

$("#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;
        });

回答1:

It is just a question of putting an initial height before the transitions. Like this:

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

Complete FIDDLE.