Question

特别是因为我之前成功完成了这件事。下面的代码位于单击时调用的函数内。第一个例子很好用：

y.domain([1, get_max(data)]);

svg.select('.y.axis')
    .call(yAxis);

svg.selectAll('.bars')
    .attr('y', function (d) { return y(d); })
    .attr('height', function (d) { return height - y(d); });

第二个例子没有做任何事情：

y.domain([1, get_max(data)]);

svg.select('.y.axis')
    .transition()
    .duration(80)
    .call(yAxis);

svg.selectAll('.bars')
    .transition()
    .duration(80)
    .attr('y', function (d) { return y(d); })
    .attr('height', function (d) { return height - y(d); });

不会产生任何javascript错误。它根本不做任何事情。任何帮助将不胜感激。谢谢！

注意：get_max（data）是一个特殊函数，用于获取一些奇怪格式化数据的最大值。当我用硬编码值10,000替换它时问题仍然存在。在我添加转换之前，它再次正常工作。

修改

function render(parent, data, brands){
        var time_format = parent.attr('data-chart-size') > 3 ? '%b %e' : '%e',
            margin = { top: 30, right: 20, bottom: 21, left: 45 },
            width = parent.width() - margin.left - margin.right - 110; // -110 for the legends on the right side

        height = 205 - margin.top - margin.bottom;

        var x = d3.time.scale().domain([ML._dates.start(), ML._dates.end()]).range([0, width]);

        y = d3.scale.log().clamp(true).range([height, 1]);

        var xAxis = d3.svg.axis().scale(x).orient('bottom')
                .tickFormat(d3.time.format(time_format)).tickSize(0).tickPadding(8);

        yAxis = d3.svg.axis().scale(y).orient('left').ticks(5, 's').tickSize(0);

        svg = d3.select(parent.get(0)).append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        var brands_length = brands.length,
            values_length = data.posts[brands[0]].values.length,

            bar_width_adjustment = 60 / values_length,
            bar_width = ((width / values_length) / brands_length) - bar_width_adjustment;

        range_band = width / values_length;

        y.domain([1, get_max(data)]);

        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(' + (bar_width * 2) + ',' + height + ')')
            .call(xAxis);

        svg.append('g')
            .attr('class', 'y axis')
            .attr('transform', 'translate(0, 0)')
            .call(yAxis);

        // BUILD THE BARS AND TOOLTIP HIGHLIGHT AREA
        for(var brands_loop = 0; brands_loop < brands_length; ++brands_loop){
            svg.selectAll('.chart-hover')
                .data(data.posts[brands[brands_loop]].values)
                .enter().append('rect')
                .attr('width', width / values_length)
                .attr('x', function (d, i) { return i * range_band - ((range_band - bar_width * 3) / 2); })
                .attr('y', 1)
                .attr('height', height - y(y.domain()[1]))
                .attr('transform', 'translate(' + ((bar_width * (brands_loop + 1) - (bar_width / 2)) + ', 0)'))
                .attr('data-index', function (d, i) { return i; })
                .attr('class', 'chart-hover')
                .style('opacity', 0.01);

            svg.selectAll('.bar-' + brands_loop)
                .data(data.posts[brands[brands_loop]].values)
                .enter().append('rect')
                .attr('data-legend-listener-brand', brands[brands_loop])
                .attr('data-legend-listener-metric', 'posts')
                .attr('data-hover-dispatcher-index', function (d, i) { return i; })
                .attr('width', bar_width)
                .attr('x', function (d, i) { return i * range_band; })
                .attr('y', function (d) { return y(d); })
                .attr('height', function (d) { return height - y(d); })
                .attr('transform', 'translate(' + ((bar_width * (brands_loop + 1) - (bar_width / 2)) + ', 0)'))
                .attr('class', 'posts bars bar-' + brands_loop);

            // POPULATE LEGEND TEXTS FOR POSTS, EXPOSURE AND ENGAGEMENT
            $('.brand-' + (brands_loop + 1))
                .text(data.posts[brands[brands_loop]].label)
                .attr('data-legend-brand', brands[brands_loop])
                .attr('data-legend-listener-brand', brands[brands_loop])
                .prev('i')
                .attr('data-legend-brand', brands[brands_loop])
                .attr('data-legend-listener-brand', brands[brands_loop]);
        }

等。等

D3轴和杆过渡不起作用

0 个答案: