jquery - 单击按钮在 ionic 中使用 D3.js 显示其他图表

Question

这是两个折线图的代码http://jsfiddle.net/kyjdu7ra/22/首先，默认情况下，它应该显示具有“close”值的图形，并且单击“Data2”按钮时，它应该显示具有“close2”值的图形。我该如何实现这一目标。 if else 语句在代码中的什么位置添加？

var app = angular.module('myApp', []);
app.controller('myController', ['$scope',
  function($scope) {
    //setting the data in the scope
    $scope.data = [{
      "date": "2012-04-30T18:30:00.000Z",
      "close": 58.13,
      "close2": 95,
      "ews": 3,
    }, {
      "date": "2012-04-29T18:30:00.000Z",
      "close": 53.98,
      "close2": 120,
      "ews": 3
    }, {
      "date": "2012-04-26T18:30:00.000Z",
      "close": 67,
      "close2": 185,
      "ews": 3
    }, {
      "date": "2012-04-24T18:30:00.000Z",
      "close": 99,
      "close2": 220,
      "ews": 2
    }, {
      "date": "2012-04-23T18:30:00.000Z",
      "close": 80,
      "close2": 60,
      "ews": 3
    }, {
      "date": "2012-04-22T18:30:00.000Z",
      "close": 167,
      "close2": 90,
      "ews": 0
    }, {
      "date": "2012-04-19T18:30:00.000Z",
      "close": 234,
      "close2": 90,
      "ews": 3
    }, {
      "date": "2012-04-18T18:30:00.000Z",
      "close": 101,
      "close2": 60,
      "ews": 1
    }, {
      "date": "2012-04-17T18:30:00.000Z",
      "close": 92,
      "close2": 70,
      "ews": 2
    }, {
      "date": "2012-04-16T18:30:00.000Z",
      "close": 96,
      "close2": 78,
      "ews": 2
    }, {
      "date": "2012-04-15T18:30:00.000Z",
      "close": 58,
      "close2": 88,
      "ews": 3
    }, {
      "date": "2012-04-12T18:30:00.000Z",
      "close": 105,
      "close2": 80,
      "ews": 1
    }, {
      "date": "2012-04-11T18:30:00.000Z",
      "close": 238,
      "close2": 120,
      "ews": 3
    }, {
      "date": "2012-03-29T18:30:00.000Z",
      "close": 108,
      "close2": 68,
      "ews": 1
    }, {
      "date": "2012-03-28T18:30:00.000Z",
      "close": 96,
      "close2": 98,
      "ews": 2
    }, {
      "date": "2012-03-27T18:30:00.000Z",
      "close": 198,
      "close2": 60,
      "ews": 0
    }];

  }
]);
app.directive('linearChart', function() {
  return {
    restrict: 'EA',

    link: function(scope, elem, attrs) {
      var data = scope.data;
      // Set the dimensions of the canvas / graph
      var margin = {
          top: 30,
          right: 20,
          bottom: 80,
          left: 50
        },
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

      // Parse the date / time
      var parseDate = d3.time.format("%d-%b-%y").parse;

      // Set the ranges
      var x = d3.time.scale().range([0, width]);
      var y = d3.scale.linear().range([height, 0]);

      // Define the axes
      var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5).tickFormat(d3.time.format("%d %b"));

      var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

      // Define the line
      var valueline = d3.svg.line()
        .x(function(d) {
          return x(new Date(d.date));
        })
        .y(function(d) {
          return y(d.close);
        });

      // Define the line2   
      var valueline2 = d3.svg.line()
        .x(function(d) {
          return x(new Date(d.date));
        })
        .y(function(d) {
          return y(d.close2);
        });

      // Adds the svg canvas
      var svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) {
        return new Date(d.date);
      }));
      y.domain([0, d3.max(data, function(d) {
        return d.close;
      })]);

      // Add the valueline path.
      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

      svg.append("path")
        .attr("class", "line")
        .attr("d", valueline2(data));

      //text label for y axis
      svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Value");
      // text label for the x axis
      svg.append("text")
        .attr("x", width / 2)
        .attr("y", height + 70)
        .style("text-anchor", "middle")
        .attr("class", "xlabel")
        .text("Date");
      // Add the scatterplot
      svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3.5)
        .style("fill", function(d) {
          if (d.ews == 0) return "green";
          if (d.ews == 1) return "yellow";
          if (d.ews == 2) return "orange";
          if (d.ews == 3) return "red";
        })
        .attr("cx", function(d) {
          return x(new Date(d.date));
        })
        .attr("cy", function(d) {
          return y(d.close);
        }).on("mouseover", function() {
          return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
        })
        .on("mousemove", function(d) {
          console.log()
          d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
          d3.select("#mytooltip").select("#ttdate").text(function() {
            return d.date; //setting the date values to tooltip
          });
          d3.select("#mytooltip").select("#ttclose").text(function() {
            return d.close; //setting the date values to tooltip
          });
          return;
        })
        .on("mouseout", function() {
          return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
        });

      // Add the scatterplot2
      svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3.5)
        .style("fill", function(d) {
          if (d.ews == 0) return "green";
          if (d.ews == 1) return "yellow";
          if (d.ews == 2) return "orange";
          if (d.ews == 3) return "red";
        })
        .attr("cx", function(d) {
          return x(new Date(d.date));
        })
        .attr("cy", function(d) {
          return y(d.close2);
        }).on("mouseover", function() {
          return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
        })
        .on("mousemove", function(d) {
          console.log()
          d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
          d3.select("#mytooltip").select("#ttdate").text(function() {
            return d.date; //setting the date values to tooltip
          });
          d3.select("#mytooltip").select("#ttclose").text(function() {
            return d.close2; //setting the date values to tooltip
          });
          return;
        })
        .on("mouseout", function() {
          return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
        });



      // Add the X Axis
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      // Add the Y Axis
      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    }
  };
});

h1 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}
body {
  font: 12px Arial;
}
path {
  stroke: #35cc99;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: gray;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.mytool {
  background: red;
  color: white;
}
.xlabel {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}

<div ng-app='myApp' ng-controller="myController">
  <h1>My Chart</h1>
  <button>Data 1</button>
  <button>Data 2</button>
    <svg linear-chart></svg>
</div>
<div class="mytool" id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
  <div id="ttclose"></div>
  <div id="ttdate"></div>
</div>

Answer 1

请看下面的代码:

注意:我使用 jQuery 来实现此目的。

http://jsfiddle.net/vijayP/kyjdu7ra/27/

我已将 id 添加到每个路径，如下所示:

// Add the valueline path.
svg.append("path")
    .attr("class", "line")
    .attr("id", "valueline")
    .attr("d", valueline(data));

 svg.append("path")
    .attr("class", "line")
    .attr("id", "valueline2")
    .attr("d", valueline2(data));

将类添加到每个点，如下所示:

svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 3.5)
    .attr("class", "valueline")

svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 3.5)
    .attr("class", "valueline2")

将按钮修改为:

<button class="databutton" data-id="valueline">Data 1</button>
<button class="databutton" data-id="valueline2">Data 2</button>

然后添加一个 $(document).ready block 将按钮 click 处理程序设置为:

$(document).ready(function(){
    $("#valueline").css("opacity",0);
    $("#valueline2").css("opacity",0);
    $(".valueline").hide();
    $(".valueline2").hide();

    $(".databutton").on("click", function(){
        var id = $(this).attr("data-id");

        $("#"+id).css("opacity", 1);
        $("."+id).show();

        if(id == "valueline")
        {
            $("#valueline2").css("opacity", 0);
            $(".valueline2").hide();
        }
        else
        {
            $("#valueline").css("opacity", 0);
            $(".valueline").hide();
        }

    });
});