在 D3 折线图中添加数据标签（适用于 Power BI）

Question

可以找到完整的源代码here。

要求：我需要将数据标签添加到折线图（也就是上面的圆圈）

尝试：已添加

selectionCircle.append("text")
                    .attr(function (d) { return d.x; })
                    .attr(function (d) { return d.y; })

线下

var selectionCircle = this.sMainGroupElement2.selectAll("circle").data(dataPoints, function (d) { return d.dataId; });

尝试在原始代码的不同位置添加我的代码，但不起作用。

Answer 1

我不太了解 Power BI，但在 d3.js 中，您只需在 enter 语句中附加文本节点，就像附加圆圈一样。

所以它看起来像这样：

selectionCircle.enter()
    .append("circle")
        .classed(".circle112", true)
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; })
        .attr("r", sH * 0.02)
        .attr("fill", statusColor)
        .attr("stroke", "white")
        .attr("stroke-width", sH * 0.015)
    .append("text")
        .text('some label text can also be a function') //Change this
        .attr(function (d) { return d.x; })
        .attr(function (d) { return d.y; });

d3的.enter()方法遍历数据，用于根据数据添加新元素

希望对您有所帮助。

Answer 2

尝试在现有 "selectionCircle.exit().remove();" 行下方添加以下代码：

this.sMainGroupElement2.selectAll("text").remove();
var selectionLabel = this.sMainGroupElement2.selectAll("circleLabel").data(dataPoints, function (d) { return d.dataId; });
selectionLabel.enter()
    .append("text")
    .classed(".circleLabel", true)
    .text(function(d) { return d.ActualOrg; })
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y-sH*0.05; })
    .attr("fill", "#bebebe")
    .attr("style", "font-family:calibri;font-size:" + sL * 0.04 + "px")
    .attr("text-anchor", "middle")                    
selectionLabel.exit().remove();

像第一行那样删除（应该更新它们）所有元素并不是最佳做法，但它会让您入门。

在 D3 折线图中添加数据标签（适用于 Power BI）

Adding data label in D3 Line chart (for Power BI)

d3.js

powerbi