Need Help Refactoring My Javascript Code (D3)

Question

I'm attempting to build a data visualization with D3 and part of it involves having a rocketship shoot from the top right of the screen to the bottom middle. The code is working fine except I would like to generate this function X amount of times as opposed to just once (i.e. multiple rocket ships doing the same exact thing one after the other). I am aware of the setInterval(), however when I implement it I am still getting just one rocketship. My theory is that it's not working because I have multiple .transition().duration() statements inside my function however perhaps that's not the case.

Here is my code:

var height = 400;
var width = 200;
var padding = {
    top: 40,
    bottom: 61,
    right: 20,
    left: 20
};
var selector = ".canvas";

function generateSpaceshipTwo(config) {

    var data = {
        current: d3.svg.diagonal()
            .source({
                "x": width,
                "y": height
            })
            .target({
                "x": width / 2,
                "y": height
            }),
        total: 20000
    };

    var height = config.height;
    var width = config.width;
    var rocketHeight = 55;
    var rocketWidth = 11;
    var padding = config.padding;
    var heightPadded = height + padding.top + padding.bottom;
    var widthPadded = width + padding.left + padding.right;

    var yScale = d3.scale.linear()
        .domain([0, data.total])
        .range([0, height])

    var axisScale = d3.scale.linear()
        .domain([0, data.total])
        .range([height, 0])

    var flameWidthScale = d3.scale.linear()
        .domain([0, data.total])
        .range([1, 4])

    var labelColorScale =
        d3.scale.linear().domain([0, 4]).range([d3.rgb("#FF2525"),
            d3.rgb('#FFFFFF')
        ]);
}

Here are the transition() & duration() statements:

var rocketTwo = d3.select(config.selector + " #rocket-container2")
    .attr('transform', 'rotate(225 0 0)')
    .transition().delay(4000).duration(100)
    .attr("style", "position: absolute; right: 100; top: 0")
    .transition(4100).duration(100)
    .attr("style", "position: absolute; right: 200; top: 100")
    .transition(4200).duration(100)
    .attr("style", "position: absolute; right: 300; top: 200")
    .transition(4300).duration(100)
    .attr("style", "position: absolute; right: 400; top: 300")
    .transition(4400).duration(100)
    .attr("style", "position: absolute; right: 500; top: 400")
    .transition(4500).duration(100)

rocketTwo.selectAll("g").remove();

var numberAxis = d3.svg.axis().scale(axisScale)
    .orient("right").ticks(5, "s");

var circleAxis = d3.svg.axis().scale(axisScale)
    .orient("right").ticks(60).tickFormat("");

d3.select(config.selector)
    .attr("style", "width:" + widthPadded + "px; height: " + heightPadded +
        "px;")

d3.select(config.selector)
    .append("svg")
    .attr("class", "axisSvg")
    .attr("width", width + padding.left + padding.right)
    .attr("height", height + padding.top + padding.bottom)
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + padding.top +
        ")")
    .attr("class", "number-axis")
    .call(numberAxis)
    .append("g")
    .attr("class", "circle-axis")
    .call(circleAxis);

var numberTicks = d3.selectAll(".number-axis .tick");
numberTicks
    .each(function(d, i) {
        d3.select(this).select("text")
            .attr("fill", labelColorScale(i));
    })

var circleTicks = d3.selectAll(config.selector + " .circle-axis 
    .tick ");
    circleTicks.each(function() {
        d3.select(this)
            .append("circle")
            .attr("r", 3)
            .attr("fill", "rgba(142,52,52,0.4)");
    });

    d3.selectAll("line").remove(); d3.selectAll(".domain").remove();

};

I call the function here:

var spaceshipTwo = setInterval(generateSpaceshipTwo({
    height: height,
    width: width,
    padding: padding,
    selector: selector
    //selector: selector + "01"
}), 2000);

Any help would be immensely appreciated.

this is not how you invoke setInterval. the return of setInterval is a string id used to clearInterval, not your space ship two. the interval function is a reference, not to be called. ex: fn and not fn() ( unless fn() returns another function reference ) see: w3schools.com/jsref/met_win_setinterval.asp — Steven Stark
– Steven Stark, Commented Mar 6, 2019 at 18:38

thedude · Accepted Answer · 2019-03-06 19:18:17Z

2

try changing your code a little, and wrap your call in a function:

var spaceshipTwo = setInterval(() => generateSpaceshipTwo({
    height: height,
    width: width,
    padding: padding,
    selector: selector
    //selector: selector + "01"
}), 2000);

answered Mar 6, 2019 at 19:18

thedude

9,8371 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Need Help Refactoring My Javascript Code (D3)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related