Question

我在d3js中创建了一个折线图，它绘制了一段时间内你的表现。这意味着我的数据在某个时间点是某个分数。例如：

2011-01-01: 75
2012-01-01: 83
2013-01-01: 50

现在我不想在Y轴上将分数显示为整数值，但我想将整数值映射为有用的单词。例如：

a score between 50 and 70 means you've scored Excellent
a score between 25 and 50 means you've scored Very Good
etc.

这样做的最佳方式是什么？

我的轴的实现如下：

var y = d3.scale.linear().range([settings.height, 0]);

var yAxis = d3.svg.axis()
            .scale(y)
            .ticks(5)
            .orient("left");

y.domain(d3.extent(data, function(d) { return d.score; }));

svg.append("g")
   .attr("class", "y axis")
   .call(yAxis)
   .append("text")
   .attr("x", (settings.width - 10 ))
   .attr("dy", ".71em")
   .style("text-anchor", "end")
   .text(settings.labels.y);

Answer 1

您可以定义自己的tickFormat。例如：

function scoreFormat(d) {
    if (d <= 70 && d > 50) {
        return "Good";
    } else if (d <= 50 && d > 25) {
        return "Bad";
    }
    return "Ugly";
}

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .orient("left")
    .tickFormat(function(d) { return scoreFormat(d); });

Answer 2

查看d3.scale.quantize，它采用类似于线性比例的域，但在偶数块中将其分解为离散范围值。如果偶数大小的块不适合您，d3.scale.threshold是一个类似的想法，除了您可以在域的子集和离散范围值之间定义自己的映射。

轴上的自定义量化刻度

2 个答案: