d3js rect svg加载时的转换高度

Question

我有一个js-fiddle，它修改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。