Question

我正在使用@JohnKiernander提供的清洁轴功能。这适用于静态图表。但是当我有一个更新的图表（在这个例子中单击一个按钮时），清洁轴功能不能按预期工作。该功能还会擦除轴的其他数字。有没有办法让这个功能与动态图表一起使用？还是我必须采取另一种方法？

请参阅小提琴：http://jsfiddle.net/jdash99/oba54L1a/以获得更好的解释。

// Clean Axis Function for reference
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // Leave the first label
        var del = 0;
        // If there is an interval set
        if (oneInEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d) {
                // Remove all but the nth label
                if (del % oneInEvery !== 0) {
                    this.remove();
                    // Find the corresponding tick line and remove
                    axis.shapes.selectAll("line").each(function (d2) {
                        if (d === d2) {
                            this.remove();
                        }
                    });
                }
            del += 1;
            });
        }
    }
};

Answer 1

我建议切换到设置不透明度的方法，而不是完全删除标签。我用两种方式修改了你的小提琴。首先，清洁轴方法变为：

var cleanAxis = function (axis, oneInEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // Leave the first label
        var del = 0;
        // If there is an interval set
        if (oneInEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d) {
                d3.select(this).attr("opacity", 1);
                // Remove all but the nth label
                if (del % oneInEvery !== 0) {
                    d3.select(this).attr("opacity", 0);
                }
                del += 1;
            });
        }
    }
};

另外，因为你动画了你不能直接绘制cleanAxis的绘图，你需要将它分配给系列的afterDraw属性：

s.afterDraw = function () { cleanAxis(myAxis, 10); };

这可以避免标签创建/隐藏时的竞争条件。

这里有更新的小提琴：http://jsfiddle.net/oba54L1a/2/

在dimple.js中清理动态图表中的轴

1 个答案: