jquery - d3js rect svg 的过渡高度加载

Question

我有工作 js fiddle ，它修改 svg 矩形元素以模仿条形图。我想做的是将负载转变为特定基础高度的条形图。当 slider 移动时图形会发生转换，但在页面首次加载时不会发生转换。

位于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 .