2

我在 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);
4

2 回答 2

3

您可以定义自己的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); });
于 2013-09-04T22:19:29.750 回答
2

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

于 2013-09-04T14:30:43.217 回答