javascript - D3 交互式图例和线条

Question

我尝试为我的 D3 制作交互式图例，但没有成功。上面的代码在一行上工作，但如果我点击（绿色、蓝色、红色或黄色）图例矩形，它只会隐藏一条红线？问题出在哪里？我认为问题是#tag id？

此代码在每个图例矩形单击中隐藏红线。

我认为这些行会产生此错误？

                var colorLegendG__3 = g__3.append("g")
                  .attr("class", "color-legend")
                  .attr("transform", "translate(40, 240)")
                  .on("click", function(){
                    // Determine if current line is visible 
                    var active   = d.active ? false : true,
                    newOpacity = active ? 0 : 1; 
                    // Hide or show the elements based on the ID

                    d3.select("#tag"+d.key.replace(/\s+/g, ''))
                        .transition().duration(100) 
                        .style("opacity", newOpacity); 
                    // Update whether or not the elements are active
                    d.active = active;
                    })


                var colorLegend__3 = d3.legend.color()
                  .scale(colorScale__3)
                  .shapePadding(3)
                  .shapeWidth(10)
                  .shapeHeight(10)
                  .labelOffset(4);

这是这个 D3 多线图的代码。

            var web1_address__3 = "http://localhost";
              var web2_address__3 = "/data3.php";
              var data_address__3 = web1_address__3 + web2_address__3;
        
              
              var outerWidth__3 = 600;
              var outerHeight__3 = 300;
              var margin__3 = { left: 60, top: 5, right: 5, bottom: 100 };
        
              var xAxisLabelText__3 = "";
              var xAxisLabelOffset__3 = 48;
        
              var yAxisLabelText__3 = "";
              var yAxisLabelOffset__3 = 60;
        
              var innerWidth__3  = outerWidth__3  - margin__3.left - margin__3.right;
              var innerHeight__3 = outerHeight__3 - margin__3.top  - margin__3.bottom;
        
              var svg__3 = d3.select("#area__3").append("svg")
                .attr("width", outerWidth__3)
                .attr("height", outerHeight__3);
              var g__3 = svg__3.append("g")
                .attr("transform", "translate(" + margin__3.left + "," + margin__3.top + ")");
        
              var xAxisG__3 = g__3.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + innerHeight__3 + ")")
              var xAxisLabel__3 = xAxisG__3.append("text")
                .style("text-anchor", "middle")
                .attr("transform", "translate(" + (innerWidth__3 / 2) + "," + xAxisLabelOffset__3 + ")")
                .attr("class", "label")
                .text(xAxisLabelText__3);
        
              var yAxisG__3 = g__3.append("g")
                .attr("class", "y axis");
              var yAxisLabel__3 = yAxisG__3.append("text")
                .style("text-anchor", "middle")
                .attr("transform", "translate(-" + yAxisLabelOffset__3 + "," + (innerHeight__3 / 2) + ") rotate(-90)")
                .attr("class", "label")
                .text(yAxisLabelText__3);
        

        
              var xScale__3 = d3.scale.ordinal().rangeRoundBands([0, innerWidth__3], .5);
              var yScale__3 = d3.scale.linear().range([innerHeight__3, 0]);
              var colorScale__3 = d3.scale.category10();
        
              
              var siFormat__3 = d3.format(".1", 1e6);
              var customTickFormat__3 = function (d){
                return siFormat__3(d).replace("G", "B");
              };
        
        
              var xAxis__3 = d3.svg.axis().scale(xScale__3).orient("bottom")
                .ticks(20)
                .outerTickSize(0);
                
              var yAxis__3 = d3.svg.axis().scale(yScale__3).orient("left")
                .ticks(10)
                .tickFormat(customTickFormat__3)
                .outerTickSize(0);
        
              var line__3 = d3.svg.line()
                .interpolate("basis")
                .x(function(d) { return xScale__3(d.xColumn__3); })
                .y(function(d) { return yScale__3(d.yColumn__3); });
                

             
                function render__3(data) {

                
                    d3.json(data_address__3, function(error, data) {
                            data.data.forEach(function(d) {
                           
                                d.xColumn__3 = d.key[1];
                                d.yColumn__3 = +d.values[0];
                                d.lineColumn__3 = d.key[2];
                                console.log(d.xColumn__3);
                                console.log(d.yColumn__3);
                                console.log(d.lineColumn__3);
        
                        })
        

                    xScale__3.domain(data.data.map(function(d) { return d.xColumn__3; }));
                    yScale__3.domain([0, d3.max(data.data, function (d){ return d.yColumn__3; })]);

        
                    xAxisG__3
                        .call(xAxis__3)
                        .selectAll("text")
                        .style("text-anchor", "end")
                        .attr("dx", "-.8em")
                        .attr("dy", ".15em")
                        .attr("transform", function(d) {
                        return "rotate(-65)"
                        });
                        
                    yAxisG__3.call(yAxis__3);
        
                    var nested__3 = d3.nest()
                      .key(function (d){ return d.lineColumn__3; })
                      .entries(data.data);

                                      
                    // Loop through each symbol / key
                    nested__3.forEach(function(d,i) {  //UUSI

                    colorScale__3.domain(nested__3.map(function (d){ return d.key; }));
        
                    var paths__3 = g__3.selectAll(".chart-line").data(nested__3);

                    paths__3.enter()
                    .append("path")
                    .attr("class", "chart-line")
                    //.attr("class", 'tag'+d.key.replace(/\s+/g, '')); // assign ID
                    .attr("id", function(d){ return 'tag' + d.key.replace(/\s+/g, '');}); 


                    paths__3.exit().remove();
                    paths__3
                      .attr("d", function (d){ return line__3(d.values); })
                      .attr("stroke", function (d){ return colorScale__3(d.key); })
                      .attr("id", function(d){ return 'tag' + d.key.replace(/\s+/g, '');}); 
                    var colorLegendG__3 = g__3.append("g")
                      .attr("class", "color-legend")
                      .attr("transform", "translate(40, 240)")
                      .on("click", function(){
                        // Determine if current line is visible 
                        var active   = d.active ? false : true,
                        newOpacity = active ? 0 : 1; 
                        // Hide or show the elements based on the ID
                       
                        d3.select("#tag"+d.key.replace(/\s+/g, ''))
                            .transition().duration(100) 
                            .style("opacity", newOpacity); 
                        // Update whether or not the elements are active
                        d.active = active;
                        })
                        

                    var colorLegend__3 = d3.legend.color()
                      .scale(colorScale__3)
                      .shapePadding(3)
                      .shapeWidth(10)
                      .shapeHeight(10)
                      .labelOffset(4);
                      
                      colorLegendG__3.call(colorLegend__3);
                   }); 
                   
                       // Add the text label for the Y axis
                    svg__3.append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", 0 - innerWidth__3.left)
                        .attr("x",0 - (innerHeight__3 / 2))
                        .attr("dy", "1em")
                        .style("text-anchor", "middle")
                        .text("%");
                    
                    })
                }
            d3.json(data_address__3, render__3);

标签： javascriptd3.js