Нужна помощь в рефакторинге моего кода Javascript (D3) - PullRequest
Новая
       11

Нужна помощь в рефакторинге моего кода Javascript (D3)

0 голосов
/ 06 марта 2019

Я пытаюсь построить визуализацию данных с помощью D3, и отчасти это связано со стрельбой с ракетного корабля из верхнего правого края экрана в нижнюю середину. Код работает нормально, за исключением того, что я хотел бы сгенерировать эту функцию X раз, а не один раз (то есть несколько ракетных кораблей делают одну и ту же вещь один за другим). Я знаю о setInterval(), однако, когда я реализую его, я все еще получаю только один ракетный корабль. Моя теория состоит в том, что это не работает, потому что у меня есть несколько .transition().duration() операторов внутри моей функции, однако, возможно, это не так.

Вот мой код: 

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')
        ]);
}

Вот операторы transition() & duration(): 

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();

};

Я вызываю функцию здесь: 

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

Любая помощь будет очень признательна.

1 Ответ

2 голосов
/ 06 марта 2019

попробуйте немного изменить свой код и оберните ваш вызов в функцию: 

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