Question

我一直在尝试重构我的代码，以便不再像我一直在做的那样删除所有元素并替换它们，而是更新容器的数据和位置。我已经使用this tutorial来了解如何处理数据选择，但是我仍然无法理解如何更新或退出数据选择。我有两个主要问题：

如何正确地将属性添加到我更新数据的位置？
当我更新数据时，如何选择将数据附加到矩形？

以下所有代码都在不同元素的单击函数中。下面是我第一次创建选择的位置，该选择应该在第一次单击元素时运行。

var update = function () {

    if (firstClick == true) {

        firstClick = false;

        magBox = svgContainer.selectAll("svg")
            .data(containerViewer)
            .enter()
            .append("rect")
            .attr("width", 10)
            .attr("height", 10)
            .attr("y", -1000)
            .attr("width", ((max_x / 3.5) / selectedContainer[1].length))

            // sets height of magBox to a percentage of the total waterfall height
            .attr("height", ((max_x / 3.5) / 1.7) / arrayMagnified)

            // sets the position left from
            .attr("x", function () {
                lencount++;

                if (lencount == parseInt(containerViewer.length / arrayMagnified)) {
                    console.log(lencount);
                    lencount = 0;
                }

                if (d3.event.pageX / max_x - 0.01 >= 0.5) {
                    return -(rectSize * 2) + (lencount * ((max_x / 3.5) / selectedContainer[1].length));

                }
                else {
                    return (rectX - (magFrameWidth * 0.9)) + (lencount * ((max_x / 3.5) / selectedContainer[1].length));
                }
            })
            .attr("y", function (d, i) {

                // height of each magBox pixel
                var pixelHeight = ((max_x / 3.5) / 1.7) / arrayMagnified;

                // uses i to iterate in relation to array length
                var iterator = parseInt(i / selectedContainer[1].length);

                if (selected > (rawDataStore.length) / 2) {
                    return (-(rectSize * 2) + pixelHeight * iterator);
                }
                else {
                    return ((rectY - magFrameHeight * 0.8) + pixelHeight * iterator);
                }
            })
            .style("fill", function (d) {
                negativeColors = -1 * d;
                invertedColors = normalize_value(negativeColors, -(rmax), -(rmin), 0, 255);
                return "rgb(" + 255 + "," + (parseInt(invertedColors)) + "," + 0 + ")";
            });
    }

第一次运行之后，它应该转到以下其他条件，该条件会在每次连续点击时更新数据：

    else {

        magBox.data(containerViewer);

        d3.selectAll(".magContainer").moveToFront();

    }
};

update();

目前，它首次运行但后来不更新数据或替换属性。当我尝试输入，追加和向代码的“else”部分添加属性时，它会创建一个新选择而不是更新第一个选择。

如果在概念上还有其他任何我想念的东西，我很乐意知道！

在d3中正确更新数据

0 个答案: