如何在图形的整行上设置一个标签

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事件，但是你可以设置它做图形设置之后的过程。