svg - 最初の棒グラフをクリックした後、2番目の棒グラフを更新します-d3js

Question

2つの棒グラフを作成し、最初の棒グラフのrect要素の1つをクリックして、2番目の棒グラフを更新したいと思います。

例えば：

data1=[1,2,3,4,5]のグラフ; data2=[6,7,8,9,10]のグラフ;

高さ2の四角形をクリックすると、チャート1の2番目の要素を意味し、チャート2のすべての要素がnewdata=[4,5,6,7,8]で更新される必要があります。

データを更新した後、チャート2は古いデータを青色で表示し、更新されたデータを黄色で表示する必要があります。

これを行う方法について何か考えはありますか？chart2の制御を取得するのに行き詰まっています。

ありがとう！

これは私が上記のシナリオを実装しようとしていたサンプルコードです

function svg_int(data){

console.log(data);

var svg = d3.selectAll("svg");

var w = 100,
    h = 500,
    barPadding =3,
    scale = 10,
    //max = d3.max(data);
    max = 200000;

var svg = d3.select('#chartDisplay')
    .append("svg")
    .attr("width",w)
    .attr("height",h);

console.log(svg);

var y = d3.scale.linear().range([h,0]),
    yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),
    x = d3.scale.linear().range([0, w]);

y.domain([0, max]).nice();
x.domain([0, data.length]).nice();

console.log(svg);

var rect = svg.selectAll("rect")
    .data(data, function(d,i) { console.log(i); console.log(d); return i;});

console.log(rect);

rect.enter().append("rect")
    .attr("class","original")
    .attr("x", function(d,i) {return x(i);})
    .attr("y", function(d,i) {console.log(d); return y(d);})
    .attr("width", w / data.length - barPadding)
    .attr("height", function(d) {return h - y(d);})
    .attr("fill", "rgb(90,90,90)");

console.log(rect);

svg.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(-4,0)")
    .call(yAxis);  

rect.on("click", function(d) {
    console.log(d);
    });

    rect.exit().remove();  }

   data1 = [1,2,3,4,5];
   data2 = [6,7,8,9,10];

   var chart1 = new svg_int(data1);
   var chart2 = new svg_int(data2);