Переход d3 не происходит в svgelement.enter () - PullRequest
Новая
       29

Переход d3 не происходит в svgelement.enter ()

0 голосов
/ 25 сентября 2018

Я добавляю довольно простой код для построения некоторых прямоугольников из файла данных, который все работает нормально, однако я пытаюсь добавить в переход для rectangles.enter() что-то похожее на .transition().duration(1000)

Я смотрел на использование функции .on() до перехода, но независимо от того, где я поместил его в код, либо без изменений, либо весь график исчезнет.Можно ли добавить в переход на функцию ввода, или мне нужно обойти, чтобы использовать d3.select

d3.json("data/buildings.json").then(function(data){
    data.forEach(function(d){
        d.height = +d.height;
    });
    console.log(data);

    var svg = d3.select("#chart-area").append("svg")
        .attr("width", 400)
        .attr("height", 400);

    var rectangles = svg.selectAll("rect")
        .data(data);

    rectangles.enter()
        .append("rect")
            .attr("x", function(d,i){
                return (i * 50) + 25;
            })
            .attr("y", 25)
            .attr("width", 40)
            .attr("height",function(d){
                return d.height;
            })
            .attr("fill", "grey")

})

1 Ответ

0 голосов
/ 25 сентября 2018

Простой ответ - нет, для перехода вам потребуется определить два состояния: начальное состояние и конечное состояние анимации.Используя цикл enter - update - exit для d3, вы можете получить что-то вроде этого: прямоугольники летят из центра SVG, изменяя свои размеры и цвет за один плавный переход.

Фаза ввода устанавливает начальное состояние перехода, фаза обновления выполняет изменения во время перехода для достижения конечного состояния.Выход не очень нужен для этого примера.Он позаботится об удалении узлов, которые больше не существуют после фазы обновления.

Существует множество хороших примеров и учебное пособие по этой теме по адресу https://bl.ocks.org для дальнейшего чтения. 

    d3.json("data/buildings.json").then(function(data){
    data.forEach(function(d){
        d.height = +d.height;
    });
    console.log(data);

    var width = 400;
    var height = 400;

    var svg = d3.select("#chart-area").append("svg")
        .attr("width", width)
        .attr("height", height);

    var rectangles = svg.selectAll("rect")
        .data(data);

    var rectEnter = rectangles.enter()
        .append('rect')
        .attr('x', width/2)
        .attr('y', height/2)
        .attr('width', 1e-6)
        .attr('height', 1e-6)
        .attr('fill', 'red')

    var rectUpdate = rectEnter.merge(rectangles)

    rectUpdate.transition()
        .duration(1500)
        .attr('x', function(d,i) { return  (i * 50) + 25 })
        .attr('y', 25)
        .attr('width', 40)
        .attr('height', function(d) { return d.height })
        .attr('fill', 'grey')

    var rectExit = rectangles.exit().remove()

})

и набор данных зданий.json 

[
    {
        "id": 1,
        "height": 20
    }, {
        "id": 2,
        "height": 40
    }, {
        "id": 3,
        "height": 10
    }
]
...