D3.js 带鼠标移动和显示点的D3线形图

我用d3（4.12.2）创建了一个折线图。我想添加鼠标移动事件。这对我不管用。这是我的密码

---

谢谢你的帮助

$(document).ready(function () {
    function lineChart(elementId, xMax, yMax, xMin, yMin, x, y, dataset) {
        var margin = {
            top: 60,
            right: 40,
            bottom: 120,
            left: 60
        };
        var w = 700;
        var h = 300;
        var width = w + margin.left + margin.right;
        var height = h + margin.top + margin.bottom;

        var xScale = d3.scaleTime()
            .domain([xMin, xMax])
            .range([0, w]);
        var yScale = d3.scaleLinear().domain([yMin, yMax]).range([h, 0]);

        var line = d3.line()
            .x(function (d) {
                return xScale(d[x]);
            })
            .y(function (d) {
                return yScale(d[y]);
            });

        var svg = d3.select(`#${elementId}`).append('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "transparent")
        .on('mousemove', identifyMouse);

        svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + h + ')')
        .call(d3.axisBottom(xScale)
            .tickFormat(d3.timeFormat('%Y-%m-%d %H:%M:%S')))
        .selectAll('text')
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr('transform', 'rotate(-65)');

        svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(0,0)')
        .call(d3.axisLeft(yScale));
        svg.append('path').datum(dataset).attr('fill', 'none')
        .attr('stroke', 'DodgerBlue')
        .attr('stroke-width', 1)
        .attr('d', line);

        var bisectDate = d3.bisector(function (d) {
                return d[x];
            }).left;

        var circle = svg.append('circle')
            .style("fill", "black")
            .style("stroke", "blue")
            .attr('r', 5);

        function identifyMouse() {
            console.log(dataset.length);
            var x0 = xScale.invert(d3.mouse(this)[0]);
            console.log('old', x0);
            x0 = new Date(`'${x0}'`).getTime();
            console.log('new', x0);
            var i = bisectDate(dataset, x0);
            console.log(i);
            var smaller = dataset[i - 1];
            console.log('smaller', smaller);
            var larger = dataset[i];
            console.log('larger', larger);
            var d = x0 - smaller[x] > larger[x] - x0 ? larger : smaller;

            circle.attr("transform", "translate(" + xScale(d[x]) + "," + yScale(d[y]) + ")");
        }
    }
});

而不是

var-bisectDate=d3.bisector（函数（d）{returnd[x]；}）。右

应该是的

var-bisectDate=d3.bisector（函数（a，b）{返回a[x]-b；}）。右

然后，对于bisect，假设数据集已排序，则可以使用它

在传递给对分函数之前，对数据进行如下排序：

  dataset.sort(function(a, b){
        return a[x]-b[x];
            });

最后，要获得平分数据，请执行以下操作：

var i=bisectDate（数据集，x0.getTime（））//因为
x0
是日期对象。

工作代码

编辑

你怎么知道使用a[x]-b

在下面这行。
var i=bisectDate（数据集，x0.getTime（））

这里是一个日期对象

因此，在函数中：

  dataset.sort(function(a, b){
        return a[x]-b[x];
            });

d3.平分线（函数（a，b）{返回a[x]-b；}）

所以a[x]是你的
unixtime
，它是领带戳，b也是时间戳。
因此，在平分线函数中，我们减去两个时间戳以找到最近点。
谢谢您的帮助。我可以问一个问题吗？您如何知道如何使用
a[x]-b
？在编辑中回答