javascript - D3.js:各种长度的行尾标签

Question

我有由一系列值组成的数据，我按如下方式加载:

vars = d3.keys(data[0]).filter(function(key) { return key !== 'round'; });
color.domain(vars);

var seasons = vars.map(function(name) {
    return {
        name: name,
        values: data.map(function(d) {
            return { round: d.round, position: +d[name] };
        })
    };
});

然后，我执行以下操作来为每个系列绘制一条线:

var line = d3.svg.line()
    .defined(function(d) { return d.position !== 0; })
    .x(function(d) { return x(d.round); })
    .y(function(d) { return y(d.position); })
    .interpolate('linear');

var season = svg.selectAll('.season')
    .data(seasons)
    .enter().append('g')
    .attr('class', 'seasons');

var lines = season.append('path')
    .attr("class", function(d, i) { return "season" + i + " line"; })
    .attr('d', function(d) { return line(d.values); })
    .style('stroke', function(d) { return color(d.name); })
    .on('click', function(d,i) { highlight(d, i, this); });

很明显，我的数据中有零值，我不想绘制这些零值，这就是我为该线使用定义函数的原因。但是，我后来想在相应行的末尾添加一个包含每个系列的最终数据值的标签，我遇到了一些问题。对于以零值结尾的系列，此标签最终会在包含零值的情况下线条结束的位置显示零值。

season.append('text')
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
    .attr("transform", function(d) { return "translate(" + x(d.value.round) + "," + y(d.value.position) + ")"; })
    .attr('dy', '.2em')
    .attr('class', 'label')
    .text(function(d) { return d.value.position; });

有人知道我如何解决这个问题吗？

Answer 1

没有惯用的方法来执行此操作，但您可以从数组末尾开始搜索第一个非零值:

season.append('text')
  .datum(function(d) {
    var j = d.values.length - 1;
    while(d.values[j].position == 0 && j > 0) { j--; }
    return {name: d.name, value: d.values[j]};
  })
  .attr("transform", function(d) {
    return "translate(" + x(d.value.round) + "," + y(d.value.position) + ")";
  })