javascript - 如何在 元素中包装 d3 轴标签？

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不包装 <a> 中的勾号元素——它被插入到下面。是否可以用 tickformat 包裹标签还是通过其他方式？

Answer 1

我认为最简洁和惯用的方法是使用 each() .您始终可以使用 tickFormat() 来完成此操作, 但会显得有点别扭。

使用 each()方法我们可以全选<text>轴中的元素，然后选择它们的父元素(即 <g> )，附加 <a>元素给 parent 终于感动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>