javascript - 如何为图形的整行设置一个标签

Question

我只想显示一次，在线图形的每个步骤上重复的值，并将其位置设置为线的末尾。

假设我的数据中的值列 3(列的名称是“目标”，但可以是任何)对于每个对象始终具有相同的值，我想用其值标记行“目标”(以显示 25) 仅在该行末尾出现一次。

这是working_code下面是在线条上创建点以及这些点上方的文本值的代码段:

// points on the lines
point.selectAll("circle")
    .data(function(d,i){ return d.values; })
    .enter().append("circle") 
    .attr("cx", function(d) { 
        return x(d.date);
      })
     .attr("cy", function(d, i) { return y(d.value); })
     .attr("r", 3) 
     .style("fill", function(d) { return color(d.name); });

// values above the points
var val = column.append("g")
    .attr("class","valori");

    val.selectAll("text")
    .data(function(d){ return d.values; })
    .enter().append("text")
    .attr("x", function(d) {
        return x(d.date);
        })
    .attr("y", function(d) { return y(d.value); })
    .attr('dy', -10)
    .attr("text-anchor", "middle")
    .text(function(d) { return d.value; }); 

我正在使用稍微改变的示例 https://bl.ocks.org/mbostock/3884955

知道如何做到这一点吗？

提前致谢!

Answer 1

@Slava32，图表显示后，您可以使用JQuery检查每一行的内容，并定义谁将被显示或谁将被隐藏。我做了一个简单的例子来说明如何做到这一点:https://jsfiddle.net/MarcelKohls/rpevzsu8/

$( document ).ready(function() {
    var contentLines = $('.valori');

    $.each( contentLines, function( lkey, lvalue ) {
        var contentColumns = $(lvalue)[0];
        var totalColumns = $(contentColumns).find('text').length;
        var lastValue = $(contentColumns[0]).html();
        var totalRepeat = 1;

       $.each( $(contentColumns).find('text'), function( ckey, cvalue ) {
            if ($(cvalue).html() == lastValue){
            totalRepeat++;
         }

        lastValue = $(cvalue).html();
      });

      if (totalRepeat == totalColumns){     
        $(contentColumns).find(':not(:last)').hide();
      }
    });
}); 

我将该函数放在 onready 事件上，但您可以将其设置为在设置图形后立即执行该过程。