Question

我正在建立一个基因可视化工具，它将显示基因的完整核苷酸和氨基酸序列。据我所知，tickFormat函数不足以满足我的需求，所以我扩展了d3轴组件来改变刻度和标签的显示。

当放大时，我的x轴应显示氨基酸和核苷酸序列。 3核苷酸形成氨基酸。所以我想让每个核苷酸代表x轴上的一个位置，然后在每组3个核苷酸下，我希望形成的氨基酸只显示一次。

这是轴标签的一个例子（＆＃39;他＆＃39;是氨基酸，＆＃39; G＆＃39;＆＃39; G＆＃39;＆＃39; C＆＃39 ;是核苷酸）：他的：327：g ^ 他的：328：g ^ 他的：329：C

我可以选择标签但是我如何抓取标签文本并将其拆分为两个单独的文本元素？

我认为我所要做的就是克隆文本元素，从原文中删除His：328。然后我可以更改克隆元素的文本并修复y位置，使其位于原始文本的正下方。

到目前为止，这是我的CustomAxis代码：

 var customXAxis = (function() {
        var base = d3.svg.axis();

        // Select and apply a style to your tick marks
        var newAxis = function(selection) {
            selection.call(base);
//            selection.selectAll('.tick', this).append('text').text('text');
        };
        // Copy over every method from the base axis 'ticks', 'scale', etc.
        for(var key in base) {
            if (base.hasOwnProperty(key)) {
                d3.rebind(newAxis, base, key);
            }
        }

        return newAxis;
    })();

我还在这里用完整的代码设置了一个小提琴（请注意我计划清理代码并使用Mike Bostock描述的图表模式一旦我开始工作。我的重点是让它立即工作，而不是代码风格。）：https://jsfiddle.net/zu51vv8y/

非常感谢任何帮助。谢谢大家！

D3.js扩展轴组件自定义标签

0 个答案: