0

我有一个 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();
            }
        });

编辑 - 我添加了完整的代码并附上了下面工作示例的图像:

工作示例

4

1 回答 1

0

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

于 2017-07-24T02:47:54.570 回答