javascript - d3.js 使用相同的选择选项控制两个图形

Question

所以我需要将两个 d3js 图表放在同一个网站中，并且我想使用相同的选择元素来控制它们。

首先，当我设法以我想要的方式工作第一张图时，我刚刚复制了第二张图的脚本，但在不同的容器中。结果很糟糕。由于变量以相同的方式命名，图表发生冲突。

后来，我通过在每个变量名称末尾添加 _1 来区分第一个图表中的所有变量，并在变量名称末尾添加 _2 。

现在图表可以正确显示。但我遇到的问题是我的更改函数，它是在更改选择选项时调用的。当每个图表都有一个选择框时，一切都很好，但是当我尝试设置它以便一个选择框控制两个图表时，我遇到了麻烦。

代码真的很长，所以接下来我将只在这里放置我正在讨论的部分代码。整个代码和示例在这里:http://jsfiddle.net/g3MHp/

(p.s. 第一个图的脚本是 html 格式的，我知道这不是 jsfiddle 的正确方法，但我想反射(reflect)真实状态，如原始文档中所示)

因此，对于第一个示例，我必须注册选择框的更改:

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; }
              })

        }

当我在第二个图表**h中添加相同名称的相同函数时，选择框的更改忽略了第一个图表，仅更改了**第二个图表

好吧，这是因为函数具有相同的名称，我更改了函数名称，然后只选择了相同的选择框，但结果与之前的尝试相同。

然后我添加了第二个选择框，并尝试使用 jQuery 更改第一个选择框来控制第二个选择框。选择第一个图表时，第二个图表的值发生变化，但第二个图表保持不变。

很明显，在插入值时没有更改事件。

所以目前我不知道。我需要更改什么才能仅用一个选择框来控制两个图表？

您可以检查我的情况并按照上面的链接进行编辑:http://jsfiddle.net/g3MHp/

欢迎任何帮助或建议..

Answer 1

您需要一个从选择框中调用的change 函数来更改两个图形。也就是说，从 change_1 和 change_2 中获取代码并将其放入一个函数中。