javascript - 在D3图形中设置条形的最小高度

我认为这应该很简单，但是我不熟悉D3，也不知道从哪里开始。我想为条形图中的条形图设置最小高度，以使即使值为0的条形图也仍然可见。

我也希望可以用Y轴准确地表示这一点(最好是在X轴和Y轴的0起点之间添加一个缓冲区)。

使用动态条形图有没有简单的方法可以做到这一点？ Y轴上的范围可以从最大2到最大50,000，但我仍然希望每个条形都具有某种高度。

抱歉，我为您提供了这么长的时间:

link: function(scope, iElement, iAttrs) {
    var scope = scope;
    var chart = '';
    var margin = {top: 20, right: 100, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    scope.postdetails = false;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
        .range([height, 0]);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5, "");

    var abbrevNum = function (d) {
        var prefix = d3.formatPrefix(d);
        return d3.round(prefix.scale(d),1) + prefix.symbol;
    };
    var initChart = function(){
        $('.main-report-chart').remove();
        x = null;
        y = null;
        x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);
        y = d3.scale.linear()
            .range([height, 0]);
        yAxis = d3.svg.axis()
            .tickFormat(function(d) { return abbrevNum(d); })
            .scale(y)
            .orient("left")
            .ticks(5, "");
        chart = d3.select(iElement[0]).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr('class','main-report-chart')
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    };
    var getMean = function(data){
        var meanData = d3.mean(data,function(d){return eval('d.'+scope.metric)});
        var meanArray = [];
        meanArray.push(meanData);

        return meanArray;
    };
    var watchCount = 0;
    var svg='';
    var newData = {}
    scope.$watch('reportData', function(newVals, oldVals) {

        if(newVals === oldVals && newVals !== undefined){
            watchCount++;
            initChart();
            newData = newVals;
            return scope.render(newVals);
        }
        if(watchCount==2){
            if(newVals){
                initChart();
                newData = newVals;
                return scope.render(newVals);
            }
        } else{
            if(newVals){
                initChart();
                newData = newVals;
                return scope.render(newVals);
            }
        }
    }, true);
    var tempValues = {};

    scope.$watch('metric', function(newVals, oldVals) {
        if(newVals){
            if(scope.reportData){
                // where redraw happens:
                return scope.render(newData);
            }
        }
    }, false);

    scope.render = function(data){
        if (scope.metric !== "") {
            x.domain(data.map(function(d) { return d.id; }));
            y.domain([0, d3.max(data, function(d) { return eval('d.' + scope.metric); })]);
            chart.select(".x.axis").remove();
            chart
                .append("g")
                .append("line")
                .attr('x1',0)
                .attr('x2',width)
                .attr('y1',height )
                .attr('y2',height)
                .attr('stroke-width','2')
                .attr("class", "domain");

            chart.select(".y.axis").remove();
            chart.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -40)
                .attr('class','label')
                .attr("x", -height)
                .attr("dy", ".71em")
                .style("text-anchor", "begin")
                .text(scope.label);

            var bar = chart.selectAll(".bar")
                .data(data, function(d) { return d.id; });

            // new data:
            bar.enter()
                .append("g")
                .attr("class", "bar-container")
                .append("rect")
                .attr("class", "bar")
                .attr('fill','#4EC7BD')
                .attr("x", function(d) { return x(d.id); })
                .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
                .attr("width", x.rangeBand())
                .on('click', function(d){
                    scope.showDetails(d, eval('d.'+scope.metric))
                });
            bar.exit().remove();
            bar
                .transition()
                .duration(750)
                .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });

            var labeltip = chart.selectAll('.tip')
                .data(data, function(d) { return d.id; });

            var meanData = getMean(data);
            var average = chart.selectAll(".average")
                .data(meanData);

            average.enter()
                .append("line")
                .attr("class", "average")
                .attr('stroke-width','2')
                .attr('stroke','#3D3F49')
                .attr('x1',0)
                .attr('x2',width)
                .attr('y1',y(meanData))
                .attr('y2',y(meanData));

            average.exit().remove();

            average.transition()
                .duration(750)
                .attr('y1',y(meanData))
                .attr('y2',y(meanData));

            var avgbox = chart.selectAll(".avg-box")
                .data(meanData);

            avgbox.enter().append("rect")
                .attr('class','avg-box')
                .attr('width',75)
                .attr('height',20)
                .attr('fill','#3D3F49')
                .attr('x',width )
                .attr('rx',5)
                .attr('y',y(meanData)-10);

            var avgtext = chart.selectAll(".avg-text")
                .data(meanData);

            avgtext.enter().append('text')
                .text('AVG '+ abbrevNum(Math.round(meanData)))
                .attr('x',width +8)
                .attr('class','avg-text')
                .attr('y',y(meanData+15))
                .attr('fill','white');

            avgbox.exit().remove();

            avgbox.transition()
                .duration(750)
            .attr('y',y(meanData)-10);

            avgtext.exit().remove();
            avgtext.transition()
                .duration(750)
                .text('AVG '+ abbrevNum(Math.round(meanData)))
                .attr('y',y(meanData)+4);
        }
    };
}

最佳答案

我将y轴最小值设置为负数，该值是最大y值的2％:

var maximumY = d3.max(data, function(d) {
    return d.frequency;
});
y.domain([-(maximumY * .02), maximumY]);

这是在经典d3条形图quick example的基础上构建的example。我认为它会产生很好的效果:

关于javascript - 在D3图形中设置条形的最小高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30311239/