当范围为0-1或0-2时,仅在d3.js中沿y轴显示整个值

Question

我正在使用d3js来显示网站视图的实时表示.为此,我使用堆栈布局,目前我通过JSON更新我的数据集.

当y轴上只显示1或2个视图时,它们与图中的视图量动态相关,轴标签为:1 => 0, 0.2, 0.4, 0.6, 0.8, 1,轴标签为:2 =>0, 0.5, 1, 1.5, 2这没有意义我的数据集,因为它显示页面的视图,你不能有半个视图.

我在d3js中有一个线性刻度,我的y轴是基础的

var y_inverted = d3.scale.linear().domain([0, 1]).rangeRound([0, height]); 

根据rangeRound()的文档,我应该只获得这个规模的整个值.为了绘制我的轴,我使用:

var y_axis = svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0,0)")
    .call(y_inverted.axis = d3.svg.axis()
        .scale(y_inverted)
        .orient("left")
        .ticks(5));

因为它是一个实时应用程序,我通过调用每秒更新一次:

function update(){
    y_inverted.domain([yStackMax, 0]);
    y_axis.transition()
        .duration(interval)
        .ease("linear")
        .call(y_inverted.axis);
}

yStackMax是从stacklayout计算的,据我所知,用于y值的数据只包含整数.

var yStackMax = d3.max(layers, function(layer) {
    return d3.max(layer, function(d) {
        return d.y0 + d.y;
    });
});

我已经尝试了几件事来为我的y轴获得一个合适的值.

d3.svg.axis()
    .scale(y_inverted)
    .orient("left")
    .ticks(5).tickFormat(d3.format(",.0f"))

给我最近的沙发,但它仍然显示 0, 0, 0, 1, 1, 1

基本上我想要的是yStackMax当它是2 时只有1个刻度,当它是2时有2个刻度,但如果yStackMax是12或1,000,000 它也应该有效

Answer 1

简答:您可以动态设置刻度数.将其设置1为仅显示两个刻度标签:

var maxTicks = 5, minTicks = 1;
if (yStackMax < maxTicks) {
    y_axis.ticks(minTicks)
}
else {
    y_axis.ticks(maxTicks)
}

很长的答案(有点偏离主题):在玩你的例子时,我想出了一个相当"完整的解决方案"来解决你的所有格式问题.随意使用它 :)

var svg = d3.select("#svg")
var width = svg.attr("width")
var height = svg.attr("height")
var yStackMax = 100000
var interval = 500
var maxTicks = 5
var minTicks = 1

var y_inverted = d3.scale.linear().domain([0, 1]).rangeRound([0, height])
var defaultFormat = d3.format(",.0f")

var format = defaultFormat

var y_axis = d3.svg.axis()
    .scale(y_inverted)
    .orient("left")
    .ticks(minTicks)
    .tickFormat(doFormat)

var y_axis_root;
var decimals = 0;

function countDecimals(v){
    var test = v, count = 0;
    while(test > 10) {
        test /= 10
        count++;
    }
    return count;
}

function doFormat(d,i){
    return format(d,i)
}

function init(){
    y_axis_root = svg.append("g")
        .attr("class", "y axis")
        // I modified your example to move the axis to a visible part of the screen
        .attr("transform", "translate(150,0)")
        .call(y_axis)
}

// custom formatting functions:
function toTerra(d) { return (Math.round(d/10000000000)/100) + "T" }
function toGiga(d)  { return (Math.round(d/10000000)/100) + "G" }
function toMega(d)  { return (Math.round(d/10000)/100) + "M" }
function toKilo(d)  { return (Math.round(d/10)/100) + "k" }

// the factor is just for testing and not needed if based on real world data
function update(factor){
    factor = (factor) || 0.1;
    yStackMax*=factor
    decimals = countDecimals(yStackMax)
    console.log("yStackMax decimals:",decimals, factor)
    if     (yStackMax < maxTicks) {
        format = defaultFormat
        y_axis.ticks(minTicks)
    }
    else {
        y_axis.ticks(maxTicks)
        if     (decimals < 3 ) format = defaultFormat
        else if(decimals < 6 ) format = toKilo
        else if(decimals < 9 ) format = toMega
        else if(decimals < 12) format = toGiga
        else                   format = toTerra
    }

    y_inverted.domain([yStackMax, 0]);
    y_axis_root.transition()
        .duration(interval)
        .ease("linear")
        .call(y_axis);
}

init()
setTimeout(update, 200)
setTimeout(update, 400)
setTimeout(update, 600)

你可以和这个html片段一起试试:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
    </head>

    <body>
        <div><svg id="svg" width="200" height="300"></svg></div>
        <script src="axis.js"></script>
        <button id="button1" onclick="update(10)">+</button>
        <button id="button2" onclick="update(0.1)">-</button>
    </body>
</html>

我知道这有点偏离主题,但我通常喜欢提供运行示例/解决方案.将额外的格式化内容视为实际问题的奖励.

Answer 2

如果你要求一定数量的刻度(通过axis.ticks()),那么d3将尝试给你很多刻度 - 但会尝试使用漂亮的值.它与您的数据无关.

你的解决方案是使用tickFormat,像你一样,圆所有的值到整数值,只要求一个刻度为尤文回答,或明确设置使用刻度值axis.tickValues([...]),这将是非常易于与d3.range一起使用

rangeRound在这种情况下无济于事,因为它与比例的输出范围有关,在这种情况下是在0和高度之间绘制的像素偏移.