Question

我有三个按钮，点击后会更改time.scale的最小值和最大值。

过渡效果很好，但即使比例没有改变，即当用户点击同一个按钮时，我试图强制过渡动画发生。

这是更新代码：

function updateAxis(grp) {
    console.log(grp);
    var parsedDts = grp.map(function(d) {
        return parseDate(d);
    });
    var minDate = d3.min(parsedDts),
        maxDate = d3.max(parsedDts);

    var plotJ = d3.select("#yAxisG")

    //>> using [minDate, minDate] to try to force a transition even when clicking the same square
    var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().delay(2000).call(axisY);

    var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().duration(2000).call(axisY);

}

我想可能会将比例更改为[minDate, minDate]会强制动画，当重新点击同一个按钮时，但事实并非如此。

如何在重新点击同一按钮时强制动画？

工作示例：

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Axis Testing</title>
    <script src="https://d3js.org/d3.v2.js"></script>
    <style type="text/css">
    #threeSquares {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 70px;
        height: 250px;
    }
    
    #barChart {
        position: absolute;
        top: 10px;
        left: 80px;
        height: 250px;
    }
    </style>
</head>

<body>
    <div id="threeSquares"></div>
    <div id="barChart"></div>
    <script type="text/javascript">
    function squaresBasics() {
        var margin = {
                top: 35,
                right: 5,
                bottom: 5,
                left: 5
            },
            width = 70 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom;

        return {
            margin: margin,
            width: width,
            height: height
        };
    }

    function getdta() {
        return {
            'label': ['year', 'day', 'month'],
            'dts': [
                ['1/1/2016', '1/1/2017'],
                ['1/1/2016', '2/1/2016'],
                ['1/1/2016', '1/2/2016', '1/3/2016']
            ]
        };
    };

    var parseDate = d3.time.format("%d/%m/%Y").parse;


    //############# SQUARES ###################
    function addSquares() {

        var dta = getdta();

        var basics = squaresBasics();
        var margin = basics.margin,
            width = basics.width,
            height = basics.height;

        //Create SVG element
        var SQsvg = d3.select("#threeSquares")
            .append("svg")
            .attr({
                "width": width + margin.left + margin.right,
                "height": height + margin.top + margin.bottom,
                id: "squaresArea"
            });

        var SQg = SQsvg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        SQg.selectAll("rect")
            .data(dta.label)
            .enter()
            .append("rect")
            .attr({
                x: margin.left,
                y: function(d, i) {
                    return i * 65
                },
                "width": width,
                "height": 50,
                fill: "blue"
            })
            .on("click", up);

        SQg.selectAll("text")
            .data(dta.label)
            .enter()
            .append("text")
            .text(function(d) {
                return d;
            })
            .attr({
                x: margin.left,
                y: function(d, i) {
                    return i * 65 + 20;
                },
                "font-family": "sans-serif",
                "font-size": "15px",
                fill: "white"
            })
            .on("click", up);


        function up(d, i) {
            //update bar chart when user selects a square
            var dta = getdta();
            updateAxis(dta.dts[i]);
        }

    }


    function addAxis() {
        var basics = squaresBasics();
        var margin = basics.margin,
            width = basics.width,
            height = basics.height;

        var dta = getdta();
        var dates = dta.dts[0];
        var parsedDts = dates.map(function(d) {
            return parseDate(d);
        });
        //console.log(d3.min(amounts));

        var minDate = d3.min(parsedDts),
            maxDate = d3.max(parsedDts);
        //console.log(minDate, maxDate)

        var svg = d3.select("#barChart")
            .append("svg")
            .attr({
                "width": 1000,
                "height": 500,
                id: "barChartPlot"
            });

        var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
        //console.log(x(new Date(2017, 7, 1)))
        //console.log(dta.dts.length)
        // console.log((margin.left - axisPadding), (margin.top + height));

        var axisPadding = 2;
        var leftAxisGroup = svg
            .append('g')
            .attr({
                transform: 'translate(' + ((margin.left + 15) - axisPadding) + ',' + (margin.top + height) + ')',
                id: "yAxisG"
            });
        var axisY = d3.svg.axis()
            .orient('bottom').scale(x);

        leftAxisGroup.call(axisY);

    }


function updateAxis(grp) {
    console.log(grp);
    var parsedDts = grp.map(function(d) {
        return parseDate(d);
    });
    var minDate = d3.min(parsedDts),
        maxDate = d3.max(parsedDts);

    var plotJ = d3.select("#yAxisG")
    
    //>> using [minDate, minDate] to try to force a transition even when clicking the same square
    var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().delay(2000).call(axisY);

    var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().duration(2000).call(axisY);

}

    addSquares();
    addAxis();
    </script>
</body>

</html>
</body>

</html>

＆＃13;

Answer 1

我已经替换了该函数，以便第一次转换进行调用第二次转换的回调。似乎工作。

＆＃13;

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Axis Testing</title>
    <script src="https://d3js.org/d3.v2.js"></script>
    <style type="text/css">
        #threeSquares {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 70px;
            height: 250px;
        }

        #barChart {
            position: absolute;
            top: 10px;
            left: 80px;
            height: 250px;
        }
    </style>
</head>

<body>
    <div id="threeSquares"></div>
    <div id="barChart"></div>
    <script type="text/javascript">
        function squaresBasics() {
            var margin = {
                    top: 35,
                    right: 5,
                    bottom: 5,
                    left: 5
                },
                width = 70 - margin.left - margin.right,
                height = 250 - margin.top - margin.bottom;

            return {
                margin: margin,
                width: width,
                height: height
            };
        }

        function getdta() {
            return {
                'label': ['year', 'day', 'month'],
                'dts': [
                    ['1/1/2016', '1/1/2017'],
                    ['1/1/2016', '2/1/2016'],
                    ['1/1/2016', '1/2/2016', '1/3/2016']
                ]
            };
        };

        var parseDate = d3.time.format("%d/%m/%Y").parse;


        //############# SQUARES ###################
        function addSquares() {

            var dta = getdta();

            var basics = squaresBasics();
            var margin = basics.margin,
                width = basics.width,
                height = basics.height;

            //Create SVG element
            var SQsvg = d3.select("#threeSquares")
                          .append("svg")
                          .attr({
                              "width": width + margin.left + margin.right,
                              "height": height + margin.top + margin.bottom,
                              id: "squaresArea"
                          });

            var SQg = SQsvg
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            SQg.selectAll("rect")
               .data(dta.label)
               .enter()
               .append("rect")
               .attr({
                   x: margin.left,
                   y: function(d, i) {
                       return i * 65
                   },
                   "width": width,
                   "height": 50,
                   fill: "blue"
               })
               .on("click", up);

            SQg.selectAll("text")
               .data(dta.label)
               .enter()
               .append("text")
               .text(function(d) {
                   return d;
               })
               .attr({
                   x: margin.left,
                   y: function(d, i) {
                       return i * 65 + 20;
                   },
                   "font-family": "sans-serif",
                   "font-size": "15px",
                   fill: "white"
               })
               .on("click", up);


            function up(d, i) {
                //update bar chart when user selects a square
                var dta = getdta();
                updateAxis(dta.dts[i]);
            }

        }


        function addAxis() {
            var basics = squaresBasics();
            var margin = basics.margin,
                width = basics.width,
                height = basics.height;

            var dta = getdta();
            var dates = dta.dts[0];
            var parsedDts = dates.map(function(d) {
                return parseDate(d);
            });
            //console.log(d3.min(amounts));

            var minDate = d3.min(parsedDts),
                maxDate = d3.max(parsedDts);
            //console.log(minDate, maxDate)

            var svg = d3.select("#barChart")
                        .append("svg")
                        .attr({
                            "width": 1000,
                            "height": 500,
                            id: "barChartPlot"
                        });

            var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
            //console.log(x(new Date(2017, 7, 1)))
            //console.log(dta.dts.length)
            // console.log((margin.left - axisPadding), (margin.top + height));

            var axisPadding = 2;
            var leftAxisGroup = svg
                    .append('g')
                    .attr({
                        transform: 'translate(' + ((margin.left + 15) - axisPadding) + ',' + (margin.top + height) + ')',
                        id: "yAxisG"
                    });
            var axisY = d3.svg.axis()
                          .orient('bottom').scale(x);

            leftAxisGroup.call(axisY);

        }


        function updateAxis(grp) {
            console.log(grp);
            var parsedDts = grp.map(function(d) {
                return parseDate(d);
            });
            var minDate = d3.min(parsedDts),
                maxDate = d3.max(parsedDts);

            var plotJ = d3.select("#yAxisG")

            //>> using [minDate, minDate] to try to force a transition even when clicking the same square
            var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
            var axisY = d3.svg.axis()
                          .orient('bottom')
                          .scale(x);

            plotJ.transition().delay(1000).each("end", function() {
                var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
                var axisY = d3.svg.axis()
                              .orient('bottom')
                              .scale(x);
                plotJ.transition().duration(2000).call(axisY);

            }).call(axisY);

        }

        addSquares();
        addAxis();
    </script>
</body>

</html>
</body>

</html>

＆＃13;

单击相同按钮时强制转换动画

1 个答案: