如何在<a>元素中</a>包裝d3軸標簽<a>？</a>

Question

基本問題：

我有一些規模

var y = d3.scalePoint().domain(['a','b','c']).range([0,100]);

我可以為這個比例制作一個軸

var y_axis = svg.append("g").attr("class", "axis").call(d3.axisLeft(y));

如何將刻度線作為鏈接？

並發症：

這非常簡單

d3.selectAll('.tick').on('click', (d) => open_link_related_to(d))

但由於我希望能夠下載情節的SVG並使鏈接繼續工作，因此策略需要看起來更像：

d3.selectAll('.tick').insert("a").attr("xlink:href", (d) => text_link_related_to(d))

但是， insert不會將 tick 包裝在<a>元素中 - 它會在下面插入。 是否可以用tickformat或其他方式包裝標簽？

Answer 1

我認為最簡潔和慣用的方法是使用each() 。 您總是可以使用tickFormat()來完成它，但它看起來有點尷尬。

使用each()方法我們可以選擇軸中的所有<text>元素，然后選擇它們的父元素（它是<g> ），將<a>元素追加到父元素並最終移動this （這是文本本身） ）到<a>元素：

d3.selectAll(".tick text").each(function(d) {
  const a = d3.select(this.parentNode).append("a")
    .attr("xlink:href", "https://www." + d + ".com");//change this for your function
  a.node().appendChild(this);
});

這是一個演示（順便說一句，Stack片段不會打開鏈接）：

 const w = 500, h = 100; const svg = d3.select("body") .append("svg") .attr("width", w) .attr("heiht", h); const scale = d3.scalePoint() .domain(['google', 'stackOverflow', 'amazon']) .range([50, w - 50]); const axis = svg.append("g") .attr("transform", "translate(0,50)") .call(d3.axisBottom(scale)) d3.selectAll(".tick text").each(function(d) { const a = d3.select(this.parentNode).append("a") .attr("xlink:href", "https://www." + d + ".com") .attr("target", "_blank"); a.node().appendChild(this); }) 

 <script src="https://d3js.org/d3.v5.min.js"></script> 

在這里你可以實際打開鏈接的JSFiddle： https ：//jsfiddle.net/xmtdfcks/

如果你檢查你的勾號，你會發現這樣的事情：

<g class="tick" opacity="1" transform="translate(250.5,0)">
    <line stroke="#000" y2="6"></line>
    <a href="https://www.stackOverflow.com" target="blank">
        <text fill="#000" y="9" dy="0.71em">stackOverflow</text>
    </a>
</g>