[英]Adding data label in D3 Line chart (for Power BI)
完整的源代码可以在这里找到。
要求:我需要将数据标签添加到折线图(也就是圆圈的上方)
尝试:已添加
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; });
尝试将我的代码添加到原始代码的不同位置,但无法正常工作。
尝试将以下代码添加到现有的“ 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();
删除(应该更新它们)而不是像第一行一样删除所有元素并不是最好的方法,但是它可以帮助您入门。
我对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()方法遍历数据,并用于根据数据添加新元素。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.