用javascript覆盖设计

我有这个

，它将被默认的

追加，但是一旦在daterangepicker上选择了日期，它就应该被覆盖。它刚刚添加了新的

在我在daterangepicker中选择日期后：

以下是我的javascript代码：

    // // Data Picker Initialization
$(document).ready(() => {
    $('#daterange').daterangepicker({
        opens: 'center',
        showDropdowns: true,
        startDate: "2020/04/16",
        endDate: "2020/04/16",
        locale: {
            format: 'YYYY/MM/DD'
        }
    }, function (start, end, label) {
        var startDate = start.format('YYYY-MM-DD');
        var endDate = end.format('YYYY-MM-DD');
        window.alert("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

        var staticUrlDowntime = "/topdowntime/" + startDate + "/" + endDate;
        console.log(staticUrlDowntime);
        $(document).ready(() => {
            $.ajax({
                url: (staticUrlDowntime),
                method: "GET",
                dataType: "json",
                success: (data) => {
                    $.each(data, (key, val) => {
                        $("#top5Downtime").append("<li>" + val.event_description + " - " + val.error_count + "</li>");
                    });
                }
            })
        });

    })
    //var dta = moment().subtract(1, 'day').format("YYYY-MM-DD"); //code to get the yesterdate
    var dta = "2020-04-16"
    console.log(dta);

    var staticUrlTop5Downtime = "/topdowntime/" + dta;
    console.log(staticUrlTop5Downtime);
    $(document).ready(() => {
        $.ajax({
            url: (staticUrlTop5Downtime),
            method: "GET",
            dataType: "json",
            success: (data) => {
                $.each(data, (key, val) => {
                    $("#top5Downtime").append("<li>" + val.event_description + " - " + val.error_count + "</li>");
                });
            }
        })
    });
    /** CODE FOR BAR CHART */
    const svgContainer = d3.select('#bar-chart')
        .append("svg");

    const margin = 80;
    const svgWidth = 50;
    const width = 1100 - 2 * margin;
    const height = 600 - 2 * margin;

    const chart = svgContainer.append('g')
        .attr('transform', "translate(" + svgWidth + "," + margin + ")");

    const xScale = d3.scaleBand()
        .range([0, width])
        .domain(sample.map((s) => s.language))
        .padding(0.4)

    const yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);

    // vertical grid lines
    // const makeXLines = () => d3.axisBottom()
    //   .scale(xScale)

    const makeYLines = () => d3.axisLeft()
        .scale(yScale)

    chart.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(xScale));

    chart.append('g')
        .call(d3.axisLeft(yScale));

    chart.append('g')
        .attr('class', 'grid')
        .call(makeYLines()
            .tickSize(-width, 0, 0)
            .tickFormat('')
        )

    const barGroups = chart.selectAll()
        .data(sample)
        .enter()
        .append('g')

    barGroups
        .append('rect')
        .attr('class', 'bar')
        .attr('x', (g) => xScale(g.language))
        .attr('y', (g) => yScale(g.value))
        .attr('height', (g) => height - yScale(g.value))
        .attr('width', xScale.bandwidth())

    barGroups
        .append('text')
        .attr('class', 'value')
        .attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2)
        .attr('y', (a) => yScale(a.value) + 30)
        .attr('text-anchor', 'middle')
        .text((a) => `${a.value}%`)

    svgContainer
        .append('text')
        .attr('class', 'label')
        .attr('x', -(height / 2) - margin)
        .attr('y', svgWidth / 3.5)
        .attr('transform', 'rotate(-90)')
        .attr('text-anchor', 'middle')
        .text('Percentage (%)')

    svgContainer.append('text')
        .attr('class', 'label')
        .attr('x', width / 2 + margin)
        .attr('y', height + margin * 1.7)
        .attr('text-anchor', 'middle')
        .text('Languages')

    svgContainer.append('text')
        .attr('class', 'title')
        .attr('x', width / 2 + margin)
        .attr('y', 40)
        .attr('text-anchor', 'middle')
        .text('Top availability CAMs for date: ' + dta);

    $('#daterange').on('apply.daterangepicker', function (ev, picker) {
        var startDate = picker.startDate.format('YYYY-MM-DD');
        var endDate = picker.endDate.format('YYYY-MM-DD');
        console.log(startDate);
        console.log(endDate);
        // var sampUrl = "/sampleURL/" + startDate;
        // console.log(sampUrl);

        // const svgContainer = d3.select('#bar-chart')
        //     .append("svg");

        // const margin = 80;
        // const svgWidth = 50;
        // const width = 1100 - 2 * margin;
        // const height = 600 - 2 * margin;

        // const chart = svgContainer.append('g')
        //     .attr('transform', "translate(" + svgWidth + "," + margin + ")");

        // const xScale = d3.scaleBand()
        //     .range([0, width])
        //     .domain(sample.map((s) => s.language))
        //     .padding(0.4)

        // const yScale = d3.scaleLinear()
        //     .range([height, 0])
        //     .domain([0, 100]);

        // const makeYLines = () => d3.axisLeft()
        //     .scale(yScale)

        // chart.append('g')
        //     .attr('transform', `translate(0, ${height})`)
        //     .call(d3.axisBottom(xScale));

        // chart.append('g')
        //     .call(d3.axisLeft(yScale));

        // chart.append('g')
        //     .attr('class', 'grid')
        //     .call(makeYLines()
        //         .tickSize(-width, 0, 0)
        //         .tickFormat('')
        //     )

        // const barGroups = chart.selectAll()
        //     .data(sample)
        //     .enter()
        //     .append('g')

        // barGroups
        //     .append('rect')
        //     .attr('class', 'bar')
        //     .attr('x', (g) => xScale(g.language))
        //     .attr('y', (g) => yScale(g.value))
        //     .attr('height', (g) => height - yScale(g.value))
        //     .attr('width', xScale.bandwidth())

        // barGroups
        //     .append('text')
        //     .attr('class', 'value')
        //     .attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2)
        //     .attr('y', (a) => yScale(a.value) + 30)
        //     .attr('text-anchor', 'middle')
        //     .text((a) => `${a.value}%`)

        // svgContainer
        //     .append('text')
        //     .attr('class', 'label')
        //     .attr('x', -(height / 2) - margin)
        //     .attr('y', svgWidth / 3.5)
        //     .attr('transform', 'rotate(-90)')
        //     .attr('text-anchor', 'middle')
        //     .text('Love meter (%)')

        // svgContainer.append('text')
        //     .attr('class', 'label')
        //     .attr('x', width / 2 + margin)
        //     .attr('y', height + margin * 1.7)
        //     .attr('text-anchor', 'middle')
        //     .text('Languages')

        // svgContainer.append('text')
        //     .attr('class', 'title')
        //     .attr('x', width / 2 + margin)
        //     .attr('y', 40)
        //     .attr('text-anchor', 'middle')
        //     .text('Top availability CAMs for date: ' + startDate);

    });
});

///数据选择器初始化
$（文档）.ready（（）=>{
$（“#日期范围”）.daterange选择器({
打开“中心”，
决战：没错，
起始日期：“2020/04/16”，
结束日期：“2020/04/16”，
区域设置：{
格式：“YYYY/MM/DD”
}
}，函数（开始、结束、标签）{
var startDate=start.format（'YYYY-MM-DD'）；
var endDate=end.format（'YYYY-MM-DD'）；
window.alert（“选择了新的日期：“+start.format（'YYYY-MM-DD'）+”到“+end.format（'YYYY-MM-DD'）”）；
var staticUrlDowntime=“/topdowntime/”+startDate+“/”+endDate；
console.log（静态停机）；
$（文档）.ready（（）=>{
$.ajax({
url:（静态url停机），
方法：“获取”，
数据类型：“json”，
成功：（数据）=>{
$.each（数据，（键，值）=>{
$（“#top5Downtime”）。追加（“
”+val.event_description+”-“+val.error_count+”
”）；
});
}
})
});
})
//var dta=moment（）.subtract（1，'day'）.format（“YYYY-MM-DD”）；//获取昨天日期的代码
var dta=“2020-04-16”
控制台日志（dta）；
var staticUrlTop5Downtime=“/topdowntime/”+dta；
console.log（staticurltop5down）；
$（文档）.ready（（）=>{
$.ajax({
url:（静态URLTOP5Downtime），
方法：“获取”，
数据类型：“json”，
成功：（数据）=>{
$.each（数据，（键，值）=>{
$（“#top5Downtime”）。追加（“
”+val.event_description+”-“+val.error_count+”
”）；
});
}
})
});
/**条形图编码*/
常量svgContainer=d3。选择（“#条形图”）
.append（“svg”）；
常数裕度=80；
常数svgWidth=50；
常数宽度=1100-2*边距；
常数高度=600-2*裕度；
const chart=svgContainer.append（'g'）
.attr（'transform'，'translate（“+svgWidth+”，“+margin+”）；
常量xScale=d3.scaleBand（）
.范围（[0，宽度]）
.domain（sample.map（（s）=>s.language））
.填充（0.4）
常量yScale=d3.scaleLinear（）
.范围（[高度，0]）
.域（[01100]）；
//垂直网格线
//const makeXLines=（）=>d3.axisBottom（）
//.scale（xScale）
常量makeYLines=（）=>d3.axisLeft（）
.刻度（yScale）
chart.append（'g'）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（xScale））；
chart.append（'g'）
.call（d3.axisLeft（yScale））；
chart.append（'g'）
.attr（'class'，'grid'）
.call（makeYLines（）
.tickSize（-width，0，0）
.tick格式（“”）
)
const barGroups=chart.selectAll（）
.数据（样本）
.输入（）
.append（'g'）
barGroups
.append（'rect'）
.attr（'class'，'bar'）
.attr（'x'，（g）=>xScale（g.language））
.attr（'y'，（g）=>yScale（g.value））
.attr（'height'，（g）=>height-yScale（g.value））
.attr（'width'，xScale.bandwidth（））
barGroups
.append（'文本'）
.attr（'类'，'值'）
.attr（'x'，（a）=>xScale（a.language）+xScale.bandwidth（）/2）
.attr（'y'，（a）=>yScale（a.value）+30）
.attr（'text-anchor'，'middle'）
.text（（a）=>`${a.value}%`）
SVG容器
.append（'文本'）
.attr（'类'，'标签'）
.attr（'x'，-（高度/2）-边距）
.attr（'y'，svgWidth/3.5）
.attr（'transform'、'rotate（-90'））
.attr（'text-anchor'，'middle'）
.text（'百分比（%）'）
svgContainer.append（'text'）
.attr（'类'，'标签'）
.attr（'x'，宽度/2+边距）
.attr（'y'，高度+裕度*1.7）
.attr（'text-anchor'，'middle'）
.text（“语言”）
svgContainer.append（'text'）
.attr（'class'，'title'）
.attr（'x'，宽度/2+边距）
.attr（'y'，40）
.attr（'text-anchor'，'middle'）
.text（'日期的最高可用性CAM：'+dta）；
$（'#daterange'）.on（'apply.daterangepicker'，函数（ev，picker）{
var startDate=picker.startDate.format（'YYYY-MM-DD'）；
var endDate=picker.endDate.format（'YYYY-MM-DD'）；
控制台日志（起始日期）；
console.log（endDate）；
//var sampUrl=“/sampleURL/”+起始日期；
//console.log（sampUrl）；
//常量svgContainer=d3。选择（“#条形图”）
//.append（“svg”）；
//常数裕度=80；
//常数svgWidth=50；
//常数宽度=1100-2*边距；
//常数高度=600-2*裕度；
//const chart=svgContainer.append（'g'）
//.attr（'transform'，'translate（“+svgWidth+”，“+margin+”）；
//常量xScale=d3.scaleBand（）
//.范围（[0，宽度]）
//.domain（sample.map（（s）=>s.language））
//.填充（0.4）
//常量yScale=d3.scaleLinear（）
//.范围（[高度，0]）
//.域（[01100]）；
//常量makeYLines=（）=>d3.axisLeft（）
//.刻度（yScale）
//chart.append（'g'）
//.attr（'transform'，'translate（0，${height}）`）
//.call（d3.axisBottom（xScale））；
//chart.append（'g'）
//.call（d3.axisLeft（yScale））；
//chart.append（'g'）
//.attr（'class'，'grid'）
//.call（makeYLines（）
//.tickSize（-width，0，0）
//.tick格式（“”）
//     )
//const barGroups=chart.selectAll（）
//.数据(
success: (data) => {
    $("#top5Downtime").html('');
    $.each(data, (key, val) => {
        $("#top5Downtime").append("<li>" + val.event_description + " - " + val.error_count + "</li>");
    });
}