javascript - 使用 d3 中的 "dy"属性将标签与刻度对齐

Question

这让我很困惑。我正在尝试使用我的 d3 图表上的“dy”属性将标签与此水平条形图上的刻度对齐。

文档说:

The dy attribute indicates a shift along the y-axis on the position of an element or its content.

这是javascript。它从数组的“问题”部分提取文本。

ticks.append("text")
    .attr("class", "ylabel")        
    .attr("dy", "0em")
    .attr("x", -9)
    .attr("fill", "#000")
    .style("text-anchor", "end")
    .style("font-size", "x-small")
    .text(function(d) {  return d['Question']; })
    .call(wrap, 600); 

因为它更容易说明，所以当我在“dy”上使用“0em”、“1em”或“2em”时，我会得到非常不同的效果。 “0em”太高了。 “1em”将多行压缩在一起(由于换行功能)，“2em”将文本向上而不是向下换行。

那么如何移动标签以与图表上的刻度线对齐？

更新

通过系统地删除 header 中的 javascript 行，我发现 word_wrap 函数以奇怪的方式上下插入文本，使其难以与节点对齐。

function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = -2.0, // ems
        x = text.attr("x"), //<-- include the x!
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy - 2.5 + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", lineHeight - dy + 3 + "em").text(word);
            }
        }
    });
}

function cwrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        x = text.attr("x"),
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

通过使用 cwrap 而不是 wrap 我能够完成这项工作。这两个功能都不完美，只能处理有限大小的文本(最多 3 行或 2 行)。但它解决了我的问题。

Answer 1

根据我的经验，您需要动态设置 dX 以使 D3 中的内容相对于其他内容显示。这是我如何让标 checkout 现在力定向图上节点旁边的示例

label = label.enter().append("text")
            .attr("class", "label")
            .attr("dx", function (d) { return d.radius * 1.25; })
            .attr("dy", ".35em")
            .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })
            .attr("font-weight", "normal")
            .style("font-size", 10)
            .text(function (d) { return d.id; })
            .merge(label);

dX 值是您想要基于所绘制内容的值，尽管没有看到有关如何绘制图形其余部分的代码，但我不确定您应该基于其他元素的哪个属性.