Question

我需要在数据点的正上方或下方显示数据标签，以避免线与标签重叠。如果我将数据标签准确放置在数据点坐标的位置，会导致重叠，任何想法？

这些是我的圈子：

 demo.selectAll("dot")
                  .data(function (d) {
                      return d.values;
                  })
                  .enter()
                  .append("circle")
                  .attr("cx", function (d) {
                      return vm.xScale(d.TelecastOrder);
                  })
                  .attr("cy", function (d) {
                      return vm.yScale(d.rating);
                  })
                  .attr("r", 5)
                  .style("fill", function (d, i, j) {
                      return (d.Indicator.indexOf("S") != -1 || d.Indicator.indexOf("s") != -1) ? "white" : vm.demos[j].color;
                  })
                  .style("stroke", function (d, i, j) {
                      return vm.demos[j].color;
                  })
                  .style("display", function (d, i, j) {
                      return (vm.demos[j].visible && (d.rating != 0.0 || d.rating != 0)) ? "" : "none";
                  })
                 .style("stroke-width", "3px")
                  .attr("class", function (d, i, j) {
                      return "point-" + vm.demos[j].name + "-" + i;
                  })
                  .on("mouseover", function (d, i, j) {
                      vm.DrawTooltip(d, i, j, "");
                  })
                  .on("mouseout", function (d) {
                      vm.div.transition()
                          .duration(100)
                          .style("opacity", 0);
                  });



demo.selectAll("labels")
 .data(function (d) {
 return d.values;
 })
 .enter()
 .append("text")
 .attr("dx", function (d) {
 return vm.xScale(d.TelecastOrder);
 })
.attr("dy", function (d) {
return vm.yScale(d.rating);
})
.text(function (d) { return vm.ChartingInfo.Demo != "P2+" ? d.rating.toFixed(1) : vm.GetRoundOff(d.rating) })
.attr("text-anchor", "middle")
.attr("fill","black");

Tis是我的标签代码。

Answer 1

您可以尝试使用d3fc point series component，它允许您通过decorate pattern添加数据标签。

这是代码的样子：

var svgBar = fc.seriesSvgPoint()
    .xScale(xScale)
    .yScale(yScale)
    .crossValue(function(_, i) { return i; })
    .mainValue(function(d) { return d; })
    .decorate(function(selection) {
      selection.enter()
        .append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(0, -10)")
        .text(function(d) { return d3.format(".2f")(d); })
        .attr("fill", "black");
    });

这是codepen with the complete example。

如何在d3.js折线图中的数据点上方或下方放置数据标签？

1 个答案: