图表交互式指南默认为光标另一侧的最远值

我是UI新手，将nvd3与Bootstrap一起使用，折线图现在正在做一些奇怪的事情：当鼠标悬停在图表的一半上时，交互式指南和突出显示的（x，y）点将恢复为图形另一半的最远值。 换句话说，当将鼠标悬停在图表的右半部分上时，将选择第一个数据点，当将鼠标悬停在图表的左半部分上时，将选择最后一个数据点。 我已经验证了图形数据的准确性。 我正在尝试制作一个小提琴，如果小提琴有效，我会更新这篇文章，但图表的 Javascript 看起来是正确的。 提前非常感谢！

下面是视图的"脚本"部分：

@section Scripts{
    <!-- page specific plugins -->
    <!-- nvd3 charts -->
    <script src="/Content/lib/d3/d3.min.js"></script>
    <script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
    <!-- flot charts-->
    <script src="/Content/lib/flot/jquery.flot.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.pie.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.resize.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script>
    <!-- clndr -->
    <script src="/Content/lib/underscore-js/underscore-min.js"></script>
    <script src="/Content/lib/CLNDR/src/clndr.js"></script>
    <!-- easy pie chart -->
    <script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
    <!-- owl carousel -->
    <script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script>
    <!-- dashboard functions -->
    <script src="/Content/js/apps/tisa_dashboard.js"></script>
    <script type="text/javascript">
        function cumulativeTestData() {
            var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
            return [
                {
                    key: "Prices",
                    values: closes //These generate in source
                },
            ];
        }
    </script>
}

以下是Javascript图表代码：

$(function () {
    // nvd3 charts
    tisa_nvd3_charts.cumulativeLine();
    // flot charts
    tisa_flot_charts.social();
    tisa_flot_charts.browsers();
    // mini calendar
    tisa_calendar.miniCal();
    // easy chart pie
    tisa_easy_pie_chart.init();
    // latest images carousel
    tisa_carousel.latest_images();
})
// nvd3 charts
tisa_nvd3_charts = {
    cumulativeLine: function () {
        if ($('#nvd3_cumulativeLine').length) {
            nv.addGraph(function () {
                var chart = nv.models.lineChart()
                          .margin({ left: 100 })  //Adjust chart margins to give the x-axis some breathing room.
                          .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                          .x(function (d) { return d[0] })
                          .y(function (d) { return d[1] })
                          .color(d3.scale.category20().range())
                          .transitionDuration(250)  //how fast do you want the lines to transition?
                          .clipVoronoi(false);
                chart.xAxis     //Chart x-axis settings
                    //.axisLabel('Time (ms)')
                    .tickFormat(function (d) {
                        return d3.time.format('%m/%d/%y')(new Date(d))
                    });

                chart.yAxis     //Chart y-axis settings
                    //.axisLabel('Voltage (v)')
                    .tickFormat(d3.format('$,.3f'));
                /* Done setting the chart up? Time to render it!*/
                //var myData = sinAndCos();   //You need data...
                d3.select('#nvd3_cumulativeLine svg')    //Select the <svg> element you want to render the chart in.   
                    .datum(cumulativeTestData())         //Populate the <svg> element with chart data...
                    .call(chart);                        //Finally, render the chart!
                //Update the chart when window resizes.
                nv.utils.windowResize(function () { chart.update() });
                return chart;
            });
        }
    }
}

以下是 HTML 标头中的引用：

<!-- nvd3 charts -->
<link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css">
<!-- jQuery -->
<script src="/Content/js/jquery.min.js"></script>
<!-- easing -->
<script src="/Content/js/jquery.easing.1.3.min.js"></script>
<!-- bootstrap js plugins -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- top dropdown navigation -->
<script src="/Content/js/tinynav.js"></script>
<!-- perfect scrollbar -->
<script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<!-- common functions -->
<script src="/Content/js/tisa_common.js"></script>
<!-- page specific stylesheets -->
<!-- owl carousel -->
<link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css">
<!-- google webfonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css">
<!-- date range picker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
<!-- timepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<!-- ion.rangeSlider -->
<link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css">
<!-- bootstrap switches -->
<link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<!-- 2col multiselect -->
<link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet">
<!-- multiselect, tagging -->
<link rel="stylesheet" href="/Content/lib/select2/select2.css">
<!-- main stylesheet -->
<link href="/Content/css/style.css" rel="stylesheet" media="screen">
<!-- moment.js (date library) -->
<script src="/Content/lib/moment-js/moment.min.js"></script>