Question

我正在努力使这个条形图自动化。在我传入数组中的6个，8个或15个元素后，它应该正确显示。它适用于16个元素+ 1.第一个是空元素（这也有点烦人）。这是条形图：http://bl.ocks.org/kiranml1/6872226

我真的不知道应该改变什么才能让它发挥作用。已经花了几个小时......（d3新手）

我减少了一些东西，比如网格和x轴（我不需要它）。

这是我的代码（与网站上的示例相同，但功能除外）

        var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation'];

            var dollars = [213, 209, 190, 179, 156, 209, 190, 179];

            var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E'];



            var xscale = d3.scale.linear()
                .domain([10, 260])
                .range([0, 622]);

            var yscale = d3.scale.linear()
                .domain([0, categories.length])
                .range([0, 480]);

            var colorScale = d3.scale.quantize()
                .domain([0, categories.length])
                .range(colors);

            var canvas = d3.select('#twoDbInfo')
                .append('svg')
                .attr({
                    'width': 900,
                    'height': 550
                });



            var yAxis = d3.svg.axis();
            yAxis
                .orient('left')
                .scale(yscale)
                .tickSize(2)
                .tickFormat(function (d, i) {
                    return categories[i];
                })
                .tickValues(d3.range(17));

            var y_xis = canvas.append('g')
                .attr("transform", "translate(150,0)")
                .attr('id', 'yaxis')
                .call(yAxis)
                .style("fill", "White");


            var chart = canvas.append('g')
                .attr("transform", "translate(150,0)")
                .attr('id', 'bars')
                .selectAll('rect')
                .data(dollars)
                .enter()
                .append('rect')
                .attr('height', 19)
                .attr({
                    'x': 0,
                    'y': function (d, i) {
                        return yscale(i) + 19;
                    }
                })
                .style('fill', function (d, i) {
                    return colorScale(i);
                })
                .attr('width', function (d) {
                    return 0;
                });


            var transit = d3.select("svg").selectAll("rect")
                .data(dollars)
                .transition()
                .duration(1000)
                .attr("width", function (d) {
                    return xscale(d);
                });

            var transitext = d3.select('#bars')
                .selectAll('text')
                .data(dollars)
                .enter()
                .append('text')
                .attr({
                    'x': function (d) {
                        return xscale(d) - 200;
                    },
                    'y': function (d, i) {
                        return yscale(i) + 35;
                    }
                })
                .text(function (d) {
                    return d + "$";
                }).style({
                    'fill': '#fff',
                    'font-size': '14px'
                });

Answer 1

我在plnkr上更新一点，添加边距和填充，注释与问题无关的部分代码（网格和条形转换，您可以轻松地将其添加回来）：

plnkr

对你提出的最重要的问题是，我认为你应该使用yAxis的序数标度而不是线性标度：

var yscale = d3.scale.ordinal()
        .domain(categories)
        .rangeBands([0, height], .1);

使条形图适应传入的数据

1 个答案: