したがって、2 つの d3js グラフを同じ Web サイトに配置する必要があり、それらを同じ select 要素で制御したいと考えています。
まず、最初のグラフを希望どおりに動作させることができたとき、2 番目のグラフのスクリプトを別のコンテナーにコピーしました。結果はひどかった。変数が同じように命名されたため、グラフが衝突していました。
_1後で、各変数名の末尾に追加することで最初のグラフからすべての vairable を区別し、変数名_2の末尾に追加することで 2 番目のグラフを区別しました。
グラフが正しく表示されるようになりました。しかし、私が抱えている問題は、選択オプションの変更時に呼び出される変更機能にあります。すべてのグラフに 1 つの選択ボックスがあると、すべてがうまく機能しますが、これを設定して 1 つの選択ボックスで両方のグラフを制御しようとすると、うまくいきませんでした。
コードは非常に長いので、ここでは私が話しているコードの一部のみをここに入れます。コード全体と例はこちら: http://jsfiddle.net/g3MHP/
（ps最初のグラフのスクリプトはhtmlにあります。jsfiddleのライトなアプローチではないことはわかっていますが、元のドキュメントのように真の状態を反映したいです）
したがって、最初の例では、選択ボックスの変更を登録する必要があります。
d3.selectAll(".graph_change_1").on("change", change_1);
そしてchange_1関数を呼び出します：
function change_1() {
graph_n_1 = this.value;
//remove guides
d3.selectAll(".guide_1").transition().duration(100).styleTween("opacity",
function() { return d3.interpolate(.5, 0); })
.remove()
if(graph_n_1 == "BPR"){
x_1.domain([0, dataX_1[0].cn_bpr_to]);
y_1.domain([0, dataY_1[0].bpr_to]);
}
if(graph_n_1 == "PR"){
x_1.domain([0, dataX_1[0].cn_pr_to]);
y_1.domain([0, dataY_1[0].pr_to]);
}
if(graph_n_1 == "assets"){
x_1.domain([0, dataX_1[0].cn_as_to]);
y_1.domain([0, dataY_1[0].as_to]);
}
// First transition the line & label to the new city.
var t0_1 = svg_1.transition().duration(750);
t0_1.selectAll(".line_1").attr("d", line_1);
// Then transition the y-axis.
yAxisRF_1 = yAxis_1.tickFormat( function(n){
if(graph_n_1 == "BPR"){ return n; }
if(graph_n_1 == "PR"){ return n; }
if(graph_n_1 == "assets"){
var nLen_1 = n.toString().length;
if(nLen_1> 12){
nLenS_1 = n/Math.pow(10,12);
addS_1 = "Bil.€";
}else if(nLen_1 > 9){
nLenS_1 = n/Math.pow(10,9);
addS_1 = "Md.€";
}else if(nLen_1 > 6){
nLenS_1 = n/Math.pow(10,6);
addS_1 = "Mio.€";
}else if(nLen_1 > 3){
nLenS_1 = n/Math.pow(10,3);
addS_1 = "T€";
}else{
nLenS_1 = 0/Math.pow(10,0);
addS_1 = "€";
}
var podlj_1 = nLen_1/3;
var podljR_1 = Math.round(podlj_1)
if (podlj_1 == podljR_1){
x2_1=0
}else{ x2_1=1 }
var Fn_1 = nLenS_1.toFixed(x2);
var FnR_1 = Fn_1.toString().replace(".0","").replace(".",",");
var FaddT_1 = addS_1;
return FnR_1+" "+FaddT_1;
}
});
xAxisRF_1 = xAxis_1.tickValues(x_1.domain())
var t1_1 = t0_1.transition();
t1_1.selectAll(".desc_val_1").text( function(){
if(graph_n_1 == "BPR"){ return "Business Page Rank (BPR)"; }
if(graph_n_1 == "PR"){ return "Page Rank (PR)"; }
if(graph_n_1 == "assets"){ return "Euro (€)"; }
})
t1_1.selectAll(".line_1").attr("d", line_1);
t1_1.selectAll(".y.axis_1").call(yAxisRF_1);
t1_1.selectAll(".x.axis_1").call(xAxisRF_1);
line_1.interpolate("basis")
.x(function(d) {
if(graph_n_1 == "BPR"){ return x_1(d.cn_bpr); }
if(graph_n_1 == "PR"){ return x_1(d.cn_pr); }
if(graph_n_1 == "assets"){ return x_1(d.cn_as); }
})
.y(function(d) { return y_1(d[graph_n_1]); });
svg_1.append("g")
.attr("class", "guide_1")
.data(dataC_1)
.append("line")
.attr("x1", function(d) {
if(graph_n_1 == "BPR"){ return +x_1(d.x3); }
if(graph_n_1 == "PR"){ return +x_1(d.x2); }
if(graph_n_1 == "assets"){ return +x_1(d.x1); }
})
.attr("x2", function(d) {
if(graph_n_1 == "BPR"){ return +x_1(d.x3); }
if(graph_n_1 == "PR"){ return +x_1(d.x2); }
if(graph_n_1 == "assets"){ return +x_1(d.x1); }
})
.attr("y1", function(d) {
if(graph_n_1 == "BPR"){ return +y_1(d.y3)+4; }
if(graph_n_1 == "PR"){ return +y_1(d.y2)+4; }
if(graph_n_1 == "assets"){ return +y_1(d.y1)+4; }
})
.attr("y2", height_1)
.style("stroke", "#c45c28")
.transition().delay(500).duration(400).styleTween("opacity",
function() { return d3.interpolate(0, .5); })
svg_1.append("g")
.attr("class", "guide_1")
.data(dataC_1)
.append("line")
.attr("x1", function(d) {
if(graph_n_1 == "BPR"){ return +x_1(d.x3-5); }
if(graph_n_1 == "PR"){ return +x_1(d.x2-5); }
if(graph_n_1 == "assets"){ return +x_1(d.x1-5); }
})
.attr("x2", 0)
.attr("y1", function(d) {
if(graph_n_1 == "BPR"){ return +y_1(d.y3); }
if(graph_n_1 == "PR"){ return +y_1(d.y2); }
if(graph_n_1 == "assets"){ return +y_1(d.y1); }
})
.attr("y2", function(d) {
if(graph_n_1 == "BPR"){ return +y_1(d.y3); }
if(graph_n_1 == "PR"){ return +y_1(d.y2); }
if(graph_n_1 == "assets"){ return +y_1(d.y1); }
})
.style("stroke", "#c45c28")
.transition().delay(500).duration(400).styleTween("opacity",
function() { return d3.interpolate(0, .5); });
t1_1.selectAll(".circles_1").attr({
cx: function(d) {
if(graph_n_1 == "BPR"){ return +x_1(d.x3); }
if(graph_n_1 == "PR"){ return +x_1(d.x2); }
if(graph_n_1 == "assets"){ return +x_1(d.x1); }
},
cy: function(d) {
if(graph_n_1 == "BPR"){ return +y_1(d.y3); }
if(graph_n_1 == "PR"){ return +y_1(d.y2); }
if(graph_n_1 == "assets"){ return +y_1(d.y1); }
},
r: 4,
id: function(d) { return d.company; }
})
}
2番目のグラフ**hに同じ名前で同じ関数を追加すると、選択ボックスの変更は無視され、 **2番目のグラフのみが変更されましたfirst graph
関数の名前が同じであるため、関数名を変更してから同じ選択ボックスを選択するだけでしたが、結果は以前の試行と同じです。
次に、2 番目の選択ボックスを追加し、jQuery を使用して最初の選択ボックスを変更して、この 2 番目の選択ボックスを制御しようとしました。最初の選択時に、2 番目のグラフで値が変更されましたが、2 番目のグラフは同じままでした。
値の挿入時に変更イベントがないことは明らかです。
だから現在、私は考えていません。1 つの選択ボックスだけで 2 つのグラフを制御するには、何を変更する必要がありますか?
私の状況を確認し、上記のリンクに従って編集できます: http://jsfiddle.net/g3MHP/
どんな助けや提案も大歓迎です..