如何在圖形的整行上設置一個標籤

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事件，但是你可以設置它做圖形設置之後的過程。