Question

          // Browser onresize event
          window.onresize = function () {
              scope.$apply();
          };


          scope.render = function (data) {
              //debugger
              //var ageNames = d3.keys(data[0]).filter(function (key) { return key !== "GateName" && key !== "QualityGateOrCheck" && key !== "GateId"; });

              var ageNames = d3.keys(data[0]).filter(function (key) {
                  return key !== "GateName" &&
                         key !== "QualityGateOrCheck" &&
                         key !== "GateId" &&
                         key !== "PercentOfCompletedByAllGates" &&
                         key !== "PercentOfCompletedByActiveGates" &&
                         key !== "PercentOfActiveByAllGates" &&
                         key !== "PercentageOfCompleteByAllGates" &&
                         key !== "PercentageOfCompleteByActiveGates" &&
                         key !== "PercentageOfActiveByAllGates" &&
                         key !== "PercentageOfCompleteByAllChecks" &&
                         key !== "PercentageOfCompleteByActiveChecks" &&
                         key !== "PercentageOfActiveByAllChecks";
              });


              data.forEach(function (d) {
                  d.ages = ageNames.map(function (name) { return { name: name, value: +d[name] }; });
              });

              var margin = { top: 20, right: 20, bottom: 30, left: 60 }, width = 1140 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;
              var ticks = [0, 25, 50, 75, 100];
              var x0 = d3.scale.ordinal().rangeRoundBands([0, width - 160], .1);
              var x1 = d3.scale.ordinal();
              var y = d3.scale.linear().range([height, 0]);
              var color = d3.scale.ordinal().range(["#3366cc", "#830300", "#97be0d"]);
              var xAxis = d3.svg.axis().scale(x0).orient("bottom");
              var yAxis = d3.svg.axis().scale(y).orient("left").tickValues(ticks);
              var svg = d3.select("#barChart").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              x0.domain(data.map(function (d) { console.log(d.GateName); return d.GateName; }));
              x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
              y.domain([0, d3.max(data, function (d) { return d3.max(d.ages, function (d) { return d.value; }); })]);
              svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
              svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("% Percentage");
              var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function (d) { return "translate(" + x0(d.GateName) + ",0)"; });
              state.selectAll("rect").data(function (d) { return d.ages; }).enter().append("rect")
                                                       .attr("width", x1.rangeBand())
                                                       .attr("x", function (d) { return x1(d.name); })
                                                       .attr("y", function (d) { return y(d.value); })
                                                       .attr("height", function (d) { return height - y(d.value); })
                                                       .style("fill", function (d) { return color(d.name); })
                                                       .each(function (d) { this._current = d; }) // NEW
                                                       .on("mouseover", function (d) {
                                                           //debugger

                                                           //Get this bar's x/y values, then augment for the tooltip
                                                           var xPosition = parseFloat(d3.select("rect").attr("x")) + x1.rangeBand() / 2;
                                                           var yPosition = parseFloat(d3.select("rect").attr("y")) / 2 + height / 2;

                                                           //Update the tooltip position and value
                                                           d3.select("#tooltip")
                                                               .style("left", xPosition + "px")
                                                               .style("top", yPosition + "px")
                                                               .select("#toolipHeading, #value")
                                                               .text(d.name, d.value);


                                                           //Show the tooltip
                                                           d3.select("#tooltip").classed("hidden", false);

                                                       }).on("mouseout", function () {

                                                           //Hide the tooltip
                                                           d3.select("#tooltip").classed("hidden", true);

                                                       });

              state.selectAll("rect").data((function (d) { return d.ages; }))
                                     .attr("id", function (d) { return d.name; })
                                     .append("title");


              var KPILegend = ["PercentageOfComplete/AllRequirements", "PercentageOfComplete/ActiveRequirements", "PercentageOfActive/AllRequirements"];

              var legend = svg.selectAll(".legend")
                              .data(KPILegend.slice().reverse())
                              .enter().append("g")
                              .attr("class", "legend")
                              .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

              legend.append("rect").attr("x", 900)
                                   .attr("width", 15)
                                   .attr("height", 15)
                                   .style("fill", color)
                                   .style('stroke', color)
                                   .on('click', function (label) {
                                       debugger

                                       var svg1 = d3.select("#barChart");

                                       svg1.selectAll('.g').selectAll('rect#PercentageOfCompleteByAllRequirements').style("display", 'block');
                                   });


          };


          //Watch 'data' and run scope.render(newVal) whenever it changes
          //Use true for 'objectEquality' property so comparisons are done on equality and not reference

          scope.$watch('data', function (chartDataNew, chartDataOld, attributes) {
              //debugger

              if (chartDataNew != undefined && chartDataOld == undefined) {
                  if (scope.data != undefined) {

                      $("#barChart").empty();
                      scope.render(scope.data);
                  }
              }
              else if (chartDataNew != undefined && chartDataOld != undefined) {
                  //debugger
                  var NewChartJSON = JSON.stringify(chartDataNew);
                  NewChartJSON = JSON.parse(NewChartJSON);

                  $.each(NewChartJSON, function (i, val) {
                      delete NewChartJSON[i].ages;
                  });

                  var OldChartJSON = JSON.stringify(chartDataOld);
                  OldChartJSON = JSON.parse(OldChartJSON);
                  NewChart = NewChartJSON;

                  var flag = false;

                  $.each(NewChart, function (index, dataNew) {
                      $.each(OldChartJSON, function (index, dataOld) {
                          if (dataNew.GateId == dataOld.GateId) {
                              if (dataNew.GateName != dataOld.GateName ||
                                  dataNew.QualityGateOrCheck != dataOld.QualityGateOrCheck ||
                                  dataNew.PercentageOfCompleteByAllRequirements != dataOld.PercentageOfCompleteByAllRequirements ||
                                  dataNew.PercentageOfCompleteByActiveRequirements != dataOld.PercentageOfCompleteByActiveRequirements ||
                                  dataNew.PercentageOfActiveByAllRequirements != dataOld.PercentageOfActiveByAllRequirements) {
                                  flag = true;
                              }
                          }
                      });
                  });

                  if (flag == true) {

                      $("#barChart").empty();
                      scope.render(scope.data);
                  }
              }
          }, true);


      }
  };

我使用d3.js实现了分组条形图。我有3个传说中的项目。单击ID为“xyz”的图例栏时，应显示/隐藏。

使用这段代码：

svg1.selectAll（'。g'）。selectAll（'rect＃PercentageOfCompleteByAllRequirements'）。style（“display”，“block”）;

我可以使用那些id获取所有条形（rect）。但如果我应用这种风格，它就无法正常运作。

但是，样式属性（显示 - 块）会附加到rect元素。

有些请帮忙。提前谢谢。

Answer 1

乍一看，我注意到您正在选择.g，类＆＃39; g。我想你只想写g，因为你不能在这段代码中输入任何类型g的类吗？

如果这不起作用，请告诉我。我不太明白你试图添加一种块的样式。知道这会对我有所帮助。

d3.js - 点击图例隐藏/显示栏

1 个答案: