Question

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

假设我的数据中的值列3（列的名称是＆＃34;目标＆＃34;，但可以是任何）对于每个对象将始终具有相同的值，我想标记行＆＃34 ;目标＆＃34;它的值（显示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事件上，但您可以将其设置为在设置图形后立即执行该过程。

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

1 个答案: