Question

所以我已经制作了一些代码来绘制散点图，其中x轴上的每个刻度都是基因名称。这一切都很好。我想要的是让用户点击任何基因名称进入有关它的信息页面。更明确地说，我希望鼠标悬停时标签后面会出现一个矩形（或某些形状），并且该形状（和文本本身）可以作为外部网页的链接。

由于轴是由D3本身创建的，我无法使用链接属性将text对象更改为a个对象（或者我可以吗？），所以不知何故我需要添加一堆子项到轴对象，在文本对象之前，因此它们被绘制在后面，具有链接的能力。这是我的一些代码，其中实际创建了x轴（工作正常）：

chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function(d) { return "rotate(-65)" });

我尝试过几件不同的事情，最近一次：

d3.select(".x").data(genenames)
    .insert("rect", "text")
    .attr("x", function(d) { return x(d); } )
    .attr("y", height)
    .attr("width", "20")
    .attr("height", "10")
    .style("fill", "blue");

但浏览器抱怨：Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.我认为这是.insert电话的内容。我还在学习javascript所以也许有一些明显我做错了，但我无法想出这一点。任何帮助将不胜感激。

Answer 1

您正在选择轴g，我认为您需要勾选g s。

这个怎么样：

var genenames = ["One","Two","Three","Four"]    

d3.selectAll(".tick").data(genenames)
    .insert("rect", "text")
    .attr("x", 0 )
    .attr("y", height)
    .attr("width", "20")
    .attr("height", "10")
    .style("fill", "blue");

示例here。

如何在图形上添加x轴标签文本后面的元素？

1 个答案: