Question

我在D3.js工作，我想绘制一个带刻度标签偏离刻度线的轴。

图像可能是解释此问题的最佳方式：

enter image description here

因此白色刻度线与Jan / Feb / Mar刻度标签不在同一位置，但沿x轴偏移。

我目前正在使用x轴的序数系列，并传入一组显式的tickValues。

我看不到任何方法来偏离D3 axis documentation中刻度线标签的刻度线。我应该简单地手动绘制刻度线吗？

Answer 1

这确实不是直接支持的，但你确实有几个选择。

您可以有两个不同的轴，一个用于刻度线，另一个用于标签。
您可以使用主要和次要刻度来破解它。请参阅this question的第一个答案。
您可以明确选择标签并对其进行偏移。请参阅the same question或this mailing list thread的其他答案。

根据您的想法，一种解决方案可能比其他解决方案更好。特别是，您需要考虑是否希望所有这些动态更新。

Answer 2

您可能要考虑使用D3FC，它可以替代支持该功能的D3轴组件。

使用D3FC可以将D3轴换成D3FC序数轴，如下所示：

self.addEventListener('fetch', event => {
    if (event.request.method === 'GET') { //only bother for static resources ;)
        switch (0) {
            case event.request.url.indexOf('https://www.google-analytics.com'):
            case event.request.url.indexOf('https://www.googletagmanager.com'):
                // skip adding to cache
                // console.warn('skip adding to cache ' + event.request.method + ' ' + event.request.mode + ' ' + event.request.url);
            break;
            case event.request.url.indexOf(SERVER_URL):
                // Cache falling back to network
                // console.info('[PWA] The service worker is serving an asset. ' + event.request.method + ' ' + event.request.mode + ' ' + event.request.url);
                event.respondWith(
                    caches.open(CACHE_NAME).then((cache) => {
                        return cache.match(event.request).then((response) => {
                            return response || fetch(event.request).then((response) => {
                                if (response.status === 200) {
                                    cache.put(event.request, response.clone());
                                    return response;
                                } else if (response.type === 'opaqueredirect' || response.status === 404) {
                                    return response;
                                } else {
                                    return cache.match('offline.html');
                                }
                            }).catch(() => {
                                return cache.match('offline.html');
                            });
                        });
                    })
                );
            break;
            default:
            // console.warn('new case for cache ' + event.request.method + ' ' + event.request.mode + ' ' + event.request.url);
        }
    }
});

D3FC的序数轴在每个条形图的中心呈现标签，并在它们之间打勾，如下所示：

全面披露-我是D3FC项目的维护者和积极贡献者。

D3.js：我可以从刻度线偏移刻度标签吗？

2 个答案: