Jquery 单击按钮，在ionic中使用D3.js显示其他图形

这是两个折线图的代码，默认情况下，它应该显示带有“close”值的图，单击Data2按钮，它应该显示带有“close2”值的图。我如何做到这一点。在代码中的何处添加if-else语句

var-app=angular.module（'myApp'，[]）；
app.controller（'myController'，['$scope'，
职能（$范围）{
//在作用域中设置数据
$scope.data=[{
“日期”：“2012-04-30T18:30:00.000Z”，
“结束”：58.13，
“关闭2”：95，
“ews”：3，
}, {
“日期”：“2012-04-29T18:30:00.000Z”，
“结束”：53.98，
“关闭2”：120，
“ews”：3
}, {
“日期”：“2012-04-26T18:30:00.000Z”，
“结束”：67，
“关闭2”：185，
“ews”：3
}, {
“日期”：“2012-04-24T18:30:00.000Z”，
“关闭”：99，
“关闭2”：220，
“ews”：2
}, {
“日期”：“2012-04-23T18:30:00.000Z”，
“结束”：80，
“关闭2”：60，
“ews”：3
}, {
“日期”：“2012-04-22T18:30:00.000Z”，
“关闭”：167，
“关闭2”：90，
“ews”：0
}, {
“日期”：“2012-04-19T18:30:00.000Z”，
“关闭”：234，
“关闭2”：90，
“ews”：3
}, {
“日期”：“2012-04-18T18:30:00.000Z”，
“关闭”：101，
“关闭2”：60，
“ews”：1
}, {
“日期”：“2012-04-17T18:30:00.000Z”，
“结束”：92，
“关闭2”：70，
“ews”：2
}, {
“日期”：“2012-04-16T18:30:00.000Z”，
“结束”：96，
“关闭2”：78，
“ews”：2
}, {
“日期”：“2012-04-15T18:30:00.000Z”，
“结束”：58，
“关闭2”：88，
“ews”：3
}, {
“日期”：“2012-04-12T18:30:00.000Z”，
“结束”：105，
“关闭2”：80，
“ews”：1
}, {
“日期”：“2012-04-11T18:30:00.000Z”，
“关闭”：238，
“关闭2”：120，
“ews”：3
}, {
“日期”：“2012-03-29T18:30:00.000Z”，
“关闭”：108，
“关闭2”：68，
“ews”：1
}, {
“日期”：“2012-03-28818:30:00.000Z”，
“结束”：96，
“关闭2”：98，
“ews”：2
}, {
“日期”：“2012-03-27T18:30:00.000Z”，
“关闭”：198，
“关闭2”：60，
“ews”：0
}];
}
]);
应用指令（'linearChart'，函数（）{
返回{
限制：“EA”，
链接：功能（范围、要素、属性）{
var数据=scope.data；
//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底部：80，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.orient（“底部”）.ticks（5）.tickFormat（d3.time.format（“%d%b”））；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（新日期（d.Date））；
})
.y（功能（d）{
返回y（d.close）；
});
//定义线条2
var valueline2=d3.svg.line（）
.x（功能（d）{
返回x（新日期（d.Date））；
})
.y（功能（d）{
返回y（d.2）；
});
//添加svg画布
var svg=d3.选择（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回新日期（d.Date）；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.close；
})]);
//添加valueline路径。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline（数据））；
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline2（数据））；
//y轴的文本标签
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-页边距。左）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“价值”）；
//x轴的文本标签
svg.append（“文本”）
.attr（“x”，宽度/2）
.attr（“y”，高度+70）
.style（“文本锚定”、“中间”）
.attr（“类”、“xlabel”）
.文本（“日期”）；
//添加散点图
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“r”，3.5）
.样式（“填充”，功能（d）{
如果（d.ews==0）返回“绿色”；
如果（d.ews==1）返回“黄色”；
如果（d.ews==2）返回“橙色”；
如果（d.ews==3）返回“红色”；
})
.attr（“cx”，功能（d）{
返回x（新日期（d.Date））；
})
.attr（“cy”，函数（d）{
返回y（d.close）；
}).on（“鼠标悬停”，函数（）{
返回d3.select（#mytooltip”）.style（“可见性”、“可见”）；//使工具提示可见
})
.on（“mousemove”，函数（d）{
console.log（）
d3.选择（“#mytooltip”）.style（“顶部”、（d3.鼠标（此）[1]+10）+“px”）.style（“左侧”、（d3.鼠标（此）[0]+10）+“px”）；
d3.选择（“#mytooltip”）。选择（“#ttdate”）。文本（函数（）{
返回d.date；//将日期值设置为工具提示
});
d3.选择（“#我的工具提示”）.select（“#ttclose”）.text（函数（）{
返回d.close；//将日期值设置为工具提示
});
返回；
})
.on（“mouseout”，函数（）{
返回d3.select（#mytooltip”）.style（“可见性”、“隐藏”）；//隐藏工具提示
});
//添加散点图2
svg.selectAll（“点”）
.数据
// 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(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();
        }

    });
});

<button ng-click="makeData1()">Data 1</button>
<button  ng-click="makeData2()">Data 2</button>

    $scope.makeData2 = function() {
        $scope.data = [{
        "date": "2012-04-30T18:30:00.000Z",
            "close": 58.13,
            "ews": 3,
    }, {
        "date": "2012-04-29T18:30:00.000Z",
            "close": 53.98,
            "ews": 3
    }, {
        "date": "2012-04-26T18:30:00.000Z",
            "close": 67,
            "ews": 3
    }, {
        "date": "2012-04-24T18:30:00.000Z",
            "close": 99,
            "ews": 2
    }, {
        "date": "2012-04-23T18:30:00.000Z",
            "close": 80,
            "ews": 3
    }, { ...
}

   $scope.makeData1 = function () {
        $scope.data = [{
            "date": "2012-04-30T18:30:00.000Z",
                "close": 95,
                "ews": 3,
        }, {
            "date": "2012-04-29T18:30:00.000Z",
                "close": 120,
                "ews": 3
        }, {
            "date": "2012-04-26T18:30:00.000Z",
                "close": 185,
                "ews": 3
        }, {
            "date": "2012-04-24T18:30:00.000Z",
                "close": 220,
                "ews": 2
        }, {

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