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) + ")";
  })

D3.js：各种长度的行的行尾标签

1 个答案: