Javascript 在不相互覆盖的情况下渲染多个d3图表

我有一个包含两组数据的数据集合（由Backbone.js集合表示）（例如，在现实世界的应用程序中，将会有更多）。我想用一个小的d3.js条形图来表示每组数据。当我渲染第一个条形图时，一切看起来都很好，但是当我渲染第二个条形图时，第一个条形图会被重新写入，并且看起来更暗、更模糊（查看比解释更容易，请看这把小提琴）。如果有3组数据，第一组将非常暗且模糊（覆盖两次），第二组暗且模糊（因为只覆盖一次），第三组看起来正常

我理解这个问题。例如，当我使用d3添加垂直导轨时，我使用以下代码

d3.selectAll('svg')

因此，在第二次遍历集合时，再次选择并重写呈现的第一个svg。请注意，在小提琴中，两个图表渲染后，第一个图表的颜色更暗（好像它的墨水量是原来的两倍）且模糊（因为数字渲染了两次）

最初，我没有使用

d3.selectAll（'svg'）

，而是尝试使用

d3.select（'svg'）

，但只有第一个图表具有垂直参考线，但使用

d3.select

时，它总是选择找到的第一个项目

如何使用d3图表呈现两组数据，而不连续写入第一组数据

var myModel = Backbone.Model.extend({});

var collection = Backbone.Collection.extend({
    model: myModel,
    initialize: function() {

    }

});
var MainView = Backbone.View.extend({ 
    el: ('.container'),
    initialize: function(){
        c = new collection({});
        c.reset([{stats: [1,2,3]}, {stats: [4,3,2] }]);
        this.render();
    },
    render: function(){
        c.each(this.addChart, this);
    },
    addChart: function(chart){
        alert("pause to view first chart, very clear, no overlap, second time through not so");
        var view = new D3View({model: chart});
        console.log(view, "view");
        this.$("#d3results").append(view.render().el);
    }

});

var D3View = Backbone.View.extend({

    initialize: function(){

    },

    render: function(){
        console.log("render in d3view");


     var modeldata = this.model.toJSON();
      var bardata = modeldata.stats;
        console.log(bardata, "bardata");
     var margin = { top: 30, right: 30, bottom: 40, left:70 }

    var height = 200 - margin.top - margin.bottom,
        width = 300 - margin.left - margin.right,
        barWidth = 50,
        barOffset = 5;

    var tempColor;

    var colors = d3.scale.linear()
    .domain([0, bardata.length*.33, bardata.length*.66, bardata.length])

    var yScale = d3.scale.linear()
            .domain([0, d3.max(bardata)])
            .range([0, height]);

    var xScale = d3.scale.ordinal()
            .domain(d3.range(0, bardata.length))
            .rangeBands([0, width], 0.2)

    var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('padding', '0 10px')
            .style('background', 'white')
            .style('opacity', 0)

    var myChart = d3.select('#d3results').append('svg')
        .style('background', '#fff')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
        .selectAll('rect').data(bardata)
        .enter().append('rect')
            .style('fill', function(d,i) {
                return colors(i);
            })
            .attr('width', xScale.rangeBand())
            .attr('x', function(d,i) {
                return xScale(i);
            })
            .attr('height', 0)
            .attr('y', height)
   myChart.transition()
        .attr('height', function(d) {
            return yScale(d);
        })
        .attr('y', function(d) {
            return height - yScale(d);
        })
        .delay(function(d, i) {
            return i * 20;
        })



    var vGuideScale = d3.scale.linear()
        .domain([0, d3.max(bardata)])
        .range([height, 0])

    var vAxis = d3.svg.axis()
        .scale(vGuideScale)
        .orient('left')
        .ticks(10)

    var vGuide = d3.selectAll('svg').append('g')
        vAxis(vGuide)
        vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
        vGuide.selectAll('path')
            .style({ fill: 'none', stroke: "#000"})
        vGuide.selectAll('line')
            .style({ stroke: "#000"})

    var hAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .tickValues(xScale.domain().filter(function(d, i) {
            return !(i % (bardata.length/5));
        }))





        return this;
    }
});

view = new MainView();

---

最简单的修复方法是保留对您的

svg

的引用。您是否不需要

selectAll

：

var mySVG = d3.select('#d3results').append('svg');

var myChart = mySVG
    .style('background', '#fff')
    .attr('width', width + margin.left + margin.right)

....

var vGuide = mySVG.append('g')
    vAxis(vGuide)

....

更新