循环遍历数据属性以创建4个单独的条形图...为什么有"幻像"数据元素绑定到xAxis？

Question

我正在尝试制作一个四边形图表,其中每个象限包含一个条形图,描绘了一组5个数据对象的不同属性.就像是.

第一张图表正如我所料.问题是接下来三个图表的x轴.不知何故,有"幻影"数据元素绑定到d3.svg.axis()创建的g元素.在每种情况下,数据元素是整数0-4.
如下面的代码所示,我在自己的svg中创建每个条形图,我在循环中定义了所有可以循环遍历我想要绘制的属性列表的东西.我这样做的原因是我的完整数据集每个对象有大约20个属性,但我只想一次绘制4个.另外,我不想重复只有一个参数不同的代码.

但我怀疑它是forEach循环和xAxis函数导致问题.

这是我的整个js文件:

var data = [{"name": "A", "engine_size": "1.6", "cmpg": "28", "horsepower": "103",  "msrp": "11690"}, 
{"name": "B", "engine_size": "1.6", "cmpg": "28", "horsepower": "103", "msrp": "12585"},
{"name": "C", "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14610"}, 
{"name": "D",  "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14810"},
{"name": "E",  "engine_size": "2.2", "cmpg": "26",  "horsepower": "140", "msrp": "16385"}];

var outer_width = 330,
    outer_height = 200,
    margin = {top: 10, right: 10, bottom: 10, left: 10},
    padding = {top: 20, right: 20, bottom: 20, left: 20},
    inner_width = outer_width - margin.left - margin.right,
    inner_height = outer_height - margin.top - margin.bottom,
    width = inner_width - padding.left - padding.right,
    height = inner_height - padding.top - padding.bottom;

var key = function(d) {
    return d.name;
}

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

var color = d3.scale.category20c();

var attribute_list = ['msrp', 'engine_size', 'horsepower', 'cmpg']; 
var svg = {};
attribute_list.forEach(function(entry) {
    svg[entry] = d3.select('.' + entry).append('svg')
    .attr('width', outer_width)
    .attr('height', outer_height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
});

//d3.json('data/cars.json', function(error, data) {
    x.domain(data.map(key));
    xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(data.length);

    attribute_list.forEach(function(entry) {
        var g = svg[entry].append('g')
            .attr('transform', 'translate(0, ' + margin.bottom + ')')
            .append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis);

        console.log(g.selectAll('line'));

        var y = d3.scale.linear()
            .domain([d3.min(data, function(d) { return +d[entry]; }),
                  d3.max(data, function(d) { return +d[entry]; })])
            .range([height*0.2, height*0.8]);   

        var bars = svg[entry].selectAll('rect')
            .data(data, key)
            .enter();

        bars.append('rect')
            .attr('class', 'bar')
            .attr('height', function(d) { return y(+d[entry]); })
            .attr('width', function(d) { return x.rangeBand(); })
            .attr('x', function(d, i) { return x(i); })
            .attr('y', function(d) { return height-y(+d[entry]); })
            .attr("fill", function(d){ return color(key(d)); });    
    }); 
//});

Answer 1

不确定从哪里获得输出,因为您提供的代码不会创建该输出.

你的代码片段在这里:

var data = [{"name": "A", "engine_size": "1.6", "cmpg": "28", "horsepower": "103",  "msrp": "11690"}, 
{"name": "B", "engine_size": "1.6", "cmpg": "28", "horsepower": "103", "msrp": "12585"},
{"name": "C", "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14610"}, 
{"name": "D",  "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14810"},
{"name": "E",  "engine_size": "2.2", "cmpg": "26",  "horsepower": "140", "msrp": "16385"}];

var outer_width = 330,
    outer_height = 200,
    margin = {top: 10, right: 10, bottom: 10, left: 10},
    padding = {top: 20, right: 20, bottom: 20, left: 20},
    inner_width = outer_width - margin.left - margin.right,
    inner_height = outer_height - margin.top - margin.bottom,
    width = inner_width - padding.left - padding.right,
    height = inner_height - padding.top - padding.bottom;

var key = function(d) {
    return d.name;
}

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

var color = d3.scale.category20c();

var attribute_list = ['msrp', 'engine_size', 'horsepower', 'cmpg']; 
var svg = {};
attribute_list.forEach(function(entry) {
    svg[entry] = d3.select('.' + entry).append('svg')
    .attr('width', outer_width)
    .attr('height', outer_height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
});

//d3.json('data/cars.json', function(error, data) {
    x.domain(data.map(key));
    xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(data.length);

    attribute_list.forEach(function(entry) {
        var g = svg[entry].append('g')
            .attr('transform', 'translate(0, ' + margin.bottom + ')')
            .append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis);

        console.log(g.selectAll('line'));

        var y = d3.scale.linear()
            .domain([d3.min(data, function(d) { return +d[entry]; }),
                  d3.max(data, function(d) { return +d[entry]; })])
            .range([height*0.2, height*0.8]);   

        var bars = svg[entry].selectAll('rect')
            .data(data, key)
            .enter();

        bars.append('rect')
            .attr('class', 'bar')
            .attr('height', function(d) { return y(+d[entry]); })
            .attr('width', function(d) { return x.rangeBand(); })
            .attr('x', function(d, i) { return x(i); })
            .attr('y', function(d) { return height-y(+d[entry]); })
            .attr("fill", function(d){ return color(key(d)); });    
    }); 
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="msrp"></div>
<div class="engine_size"></div>
<div class="horsepower"></div>
<div class="cmpg"></div>

这是你的代码,它似乎在每个图形上产生一个左对齐的单个条,并且X轴看起来正确标记.每个图表实际上包含五个条形图,但它们重叠.

这是一些更正的代码:

var data = [{"name": "A", "engine_size": "1.6", "cmpg": "28", "horsepower": "103",  "msrp": "11690"}, 
{"name": "B", "engine_size": "1.6", "cmpg": "28", "horsepower": "103", "msrp": "12585"},
{"name": "C", "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14610"}, 
{"name": "D",  "engine_size": "2.2", "cmpg": "26", "horsepower": "140", "msrp": "14810"},
{"name": "E",  "engine_size": "2.2", "cmpg": "26",  "horsepower": "140", "msrp": "16385"}];


var outer_width = 330,
    outer_height = 200,
    margin = {top: 10, right: 10, bottom: 10, left: 10},
    padding = {top: 20, right: 20, bottom: 20, left: 20},
    inner_width = outer_width - margin.left - margin.right,
    inner_height = outer_height - margin.top - margin.bottom,
    width = inner_width - padding.left - padding.right,
    height = inner_height - padding.top - padding.bottom;

var key = function(d) {
    return d.name;
}

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

var color = d3.scale.category20c();

var attribute_list = ['msrp', 'engine_size', 'horsepower', 'cmpg']; 
var svg = {};
attribute_list.forEach(function(entry) {
    svg[entry] = d3.select('.' + entry).append('svg')
    .attr('width', outer_width)
    .attr('height', outer_height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
});

//d3.json('data/cars.json', function(error, data) {
    x.domain(data.map(key));
    xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(data.length);

    attribute_list.forEach(function(entry) {
        var g = svg[entry].append('g')
            .attr('transform', 'translate(0, ' + margin.bottom + ')')
            .append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis);

        console.log(g.selectAll('line'));

        var y = d3.scale.linear()
            .domain([d3.min(data, function(d) { return +d[entry]; }),
                  d3.max(data, function(d) { return +d[entry]; })])
            .range([height*0.2, height*0.8]);   

        var bars = svg[entry].selectAll('rect')
            .data(data, key)
            .enter();

        bars.append('rect')
            .attr('class', 'bar')
            .attr('height', function(d) { return y(+d[entry]); })
            .attr('width', function(d) { return x.rangeBand(); })
            .attr('x', function(d, i) { return x(d.name); })
            .attr('y', function(d) { return height-y(+d[entry]); })
            .attr("fill", function(d){ return color(key(d)); });    
    }); 
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="msrp"></div>
<div class="engine_size"></div>
<div class="horsepower"></div>
<div class="cmpg"></div>

您正在计算X每个柱的位置:

.attr('x', function(d, i) { return x(i); })

我想你实际上想要计算X每个酒吧的位置:

.attr('x', function(d, i) { return x(d.name); })

您传入的索引不是为X比例定义的域的一部分,它将返回undefined.传递名称意味着您传递了属于域名的值,因此您将获得相应的坐标.