Question

我正在尝试从多个阵列更新数据。我的最初要求是这样的：

    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 circles。现在，我试图更改数据。为简单起见，我使用缩放功能来创建新数据：

 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")

    };

我在这里尝试的只是使用缩放/更新功能中的y值将所有9个数据点向上或向下移动。不幸的是，这不起作用。如果有人知道如何更新这9个数据点，我将非常感激。这是FIDDLE

D3：如何从多个阵列更新数据？

0 个答案: