그래프에서 x 축 레이블 텍스트 뒤에 요소를 추가하려면 어떻게합니까?

Question

그래서 산점도를 그리는 코드를 만들었습니다. x 축의 각 틱은 유전자 이름입니다. 그게 다 잘되고있어. 내가 원하는 것은 유전자 이름을 클릭하여 정보 페이지로 이동시키는 것입니다. 좀 더 명확하게 말하자면, 마우스 오버시 레이블 뒤에 사각형 (또는 일부 모양)을 표시하고 해당 모양 (및 텍스트 자체)이 외부 웹 페이지에 대한 링크로 작동하도록하고 싶습니다.

축이 D3 자체로 생성되었으므로 text 개체를 링크 속성이있는 a 개체로 변경할 수 없습니다 (또는 할 수 있습니까?), 어쨌든 축 개체에 여러 개의 자식을 추가해야합니다 텍스트 객체가 뒤에서 그려지기 때문에 링크가 될 수 있습니다. 가장 최근에, 나는 몇 가지 다른 일을 시도했습니다

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"); 

을하지만 브라우저에 불평 다음은 x 축이 실제로 만들어 내 코드의 일부이다 (잘 작동) 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 전화에 관한 것입니다. 난 아직도 자바 스크립트를 배우고있어 어쩌면 분명히 내가 잘못하고있는 것이 분명해 보이지만 나는 이것을 이해할 수 없다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

축 g을 선택하면 틱 g이 필요하다고 생각합니다.

이 방법에 대해 :

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.