Question

我有一个D3图表，但只想显示y轴的3个刻度。

根据数据的不同，我有时会得到3个，4个或5个刻度，这使我很难用CSS设置样式。

以下是完整代码：

    // Create a new d3
    var chart = d3.select('#analytics-chart').append('div').attr('class', 'chart');
    chart.append('div').attr('class', 'y-axis');
    chart.append('div').attr('class', 'bars-and-x-axis');

    var barMargin = '0 2px',
        min = 0,
        max = d3.max(data, function(d) {
            return parseInt(d.value, 10);
        });

    var bars = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'bars'),
        xaxis = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'x-axis'),
        yaxis = d3.selectAll('.y-axis'),
        xScale = d3.scale.linear().domain([1, data.length]),
        yScale = d3.scale.linear().range(0, 100).domain([min, max]),
        barWrapper = bars.selectAll()
            .data(data.map(function(d) {
                return d.value;
            }))
            .enter()
            .append('div')
            .attr('class', function(d, i) {
                if (d == 0) {
                    return 'chart-data-wrapper empty';
                } else {
                    return 'chart-data-wrapper';
                }
            }).style('margin', barMargin);

    var bar = barWrapper.append('div').attr('class', 'chart-data-bar')
        .style('height', function(d) {
            return Math.ceil((d - min) / (max - min) * 100) + 'px';
        })
        .append('div')
        .attr('class', 'tooltip')
        .attr('style', function(d, i) {
            return 'left: ' + Math.ceil(i / data.length * 100) + '%; transform: translateX(-' + Math.ceil(i / data.length * 100) + '%); ';  
        })
        .append('p')
        .text(function(d, i) {
            return data[i].date;
        })
        .append('p')
        .attr('class', 'data')
        .text(function(d, i) {
            return data[i].content;
        });

    xaxis.selectAll()
        .data(xScale.ticks(12))
        .enter()
        .append('div')
        .attr('class', 'x-axis-mark');

    yaxis.selectAll()
        .data(yScale.ticks(3))
        .enter()
        .insert('small', ':first-child')
        .attr('class', 'label')
        .text(function(d, i) {
            if (d > 999) {
                d = d / 1000 + 'k';
            } 
            return d;
        });

    var tick = d3.selectAll('.x-axis-mark')
        .append('div')
        .attr('class', function(d, i) {
            if (i % 3 == 1) {
                return 'x-axis-tick-with-label';
            } else {
                return 'x-axis-tick';
            }
        });

    var label = d3.selectAll('.x-axis-mark')
        .append('small')
        .attr('class', 'label')
        .text(function(d, i) {
        var format = d3.time.format('%b');
            return data[i].xlabel;
        })
        .attr('class', function(d, i) {
            if (i % 3 != 1) {
                d3.select(this).remove();
            }
        });

编辑 - 我已添加完整代码并附上以下工作示例的图片：

Answer 1

我能够用我自己的数学函数替换yScale.ticks(3)中的.data(yScale.ticks(3))，该函数返回一组值来创建刻度值。

D3 - 创建一个包含3个固定y轴刻度的图表

1 个答案: