Javascript 如何在<；中包装d3轴标签；a>；元素？ 基本问题：

我有一些天平

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

不会将勾号括在

元素中，而是在下面插入。是否可以使用

格式

或其他方式包装标签

我认为最干净、最惯用的方法是使用

each（）

。您总是可以使用

tickFormat（）

来完成这项工作，但这似乎有点尴尬

使用

each（）

方法，我们可以选择轴中的所有

元素，然后选择它们的父元素（即

），将

元素附加到父元素，最后将

此
（即文本本身）移动到
元素：

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 snippet不会打开链接）：


const w=500，
h=100；
const svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“height”，h）；
常量比例=d3.scalePoint（）
.domain（['google'，'stackOverflow'，'amazon']））
.范围（[50，w-50]）；
const axis=svg.append（“g”）
.attr（“变换”、“平移（0,50）”）
.呼叫（d3.Axis底部（刻度））
d3.选择全部（“.勾选文本”）。每个功能（d）{
常量a=d3.select（this.parentNode）.append（“a”）
.attr（“xlink:href，”https://www.“+d+”.com”）
.attr（“目标”，“空白”）；
a、 node（）.appendChild（此）；
})
谢谢@gerardofurtado！如果您感兴趣，我还有一个axis问题：@AlexLenail您不必删除您的问题。一个问题没有错，因为它是重复的：重复的目标只是先前存在的答案。谢谢你的好意，杰拉尔多！因为我以为我要问的问题原来只是一个逻辑错误，我觉得这个问题不属于我。虽然JS
=>
没有绑定作用域，但我还是有点困惑。。。coffeescript
->
可以。。