Линейная диаграмма d3.js рисует анимацию слева направо только добавление новых данных - PullRequest
Новая
       20

Линейная диаграмма d3.js рисует анимацию слева направо только добавление новых данных

0 голосов
/ 11 декабря 2018

Q1. Я хочу создать потоковую диаграмму области, используя D3.js v4 .

Теперь я обновляю данные диаграммы, когда получаю данные с использованием Ajax каждую секунду.. 

var path = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .style("stroke-width", 1)
    .style("stroke", "white")
    .style("fill", "none");
tick();

function tick() {
    apiData.splice(0, 1);
    data.push(apiData[0])
    var newLength = path.node().getTotalLength();
    path.attr("d", line)
        .attr("class", "line")
        .attr("transform", null)
        .attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(2000)
        .attr("stroke-dashoffset", 0)
        .attr("transform", "translate(" + x(-1) + ",0)")
        .on("end", tick);
}

Я хочу анимировать только новые данные, добавленные без устаревших данных.

Но этот код работает (рисование анимации), работая со всеми данными.

Q2. Я хочу создать точку свечения, как это видео.

Я думаю, что этот шаг будет работать для меня,

шаг 1. сделать div 

<div id="glow-point"></div>

шаг 2. абсолютная позиция css. 

<style>
#glow-point {
    position: absolute;
    background-color: rgb(0, 150, 0);
    box-shadow: 0px 0px 40px 12px rgb(0, 120, 0);
    width: 5px;
    height: 5px;
    left: -1;
    top: -1;
    border-radius: 50px;
    animation: pulse 1s infinite;
}
</style>

шаг 3. когда svg ondraw, получите x, y очков. 

var glowPoint = document.getElementById('glow-point');
glowPoint.style.left = ????
glowPoint.style.top = ????

но я не знаю, как я могу получитьx, y указывает, когда d3.js svg Drawing.TT

Кто-нибудь поможет?

Вот ссылка на видео. ссылка на видео.

Вот мой скрипач

, пожалуйста, помогите мне ..... я не могу решить это ...

...