D3: Как обновить данные из нескольких массивов? - PullRequest
0 голосов
/ 24 ноября 2018

Я пытаюсь обновить данные из нескольких массивов.Мои начальные требования таковы:

    var svgWidth = 800;
    var svgHeight = 300;

    var svg = d3.select("body")
        .append('svg')
        .attr('width', svgWidth)
        .attr('height', svgHeight)
        .style("background", "red");

    var zoom = d3.zoom()
        .on("zoom", update);

    var array = [1, 2, 3]

    svg.append("rect")
        .attr("class", "zoom")
        .attr("width", svgWidth)
        .attr("height", svgWidth)
        .call(zoom)

    var circles = svg.append("g").selectAll("g")
        .data(array)
        .enter()
        .append('g')

    circles.selectAll("circle")
        .data(function (d) { return [[1, d], [2, d], [3, d]]; })
        .enter()
        .append("circle")
        .attr("class", "node1")
        .attr("fill", "black")
        .attr("cx", (d) => { return ((d[0] * 50)); })
        .attr("cy", (d) => { return d[1] * 50 })
        .attr("r", "8")

    circles.exit().remove();

Результат - 3x3 кружки .Сейчас я пытаюсь изменить данные.Для простоты я использую функцию масштабирования для создания новых данных:

 function update() {

        const shift = d3.event.transform.y

        var update = svg.select("g").selectAll("g")
            .data(array)
            update.exit().remove();

        var updateGroup = update.enter().append("g");
        update = updateGroup.merge(update)

        updateGroup.enter().selectAll("circle")
            .data(function (d) { return [[1, d], [2, d]]; })
            .enter()
            .append("circle")

        update.select("circle")
            .attr("fill", "white")
            .attr("cx", (d) => { return ((d[0] * 50)); })
            .attr("cy", (d) => { return(d[1] * 50)  + shift})
            .attr("r", "8")

    };

Здесь я пытаюсь просто сдвинуть все 9 точек данных вверх или вниз с помощью значения y из функции масштабирования / обновления.К сожалению, это не работает.Если кто-то знает, как обновить эти 9 точек данных, я был бы очень благодарен.Вот вам FIDDLE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...