D3折线图与鼠标移动和显示点

Question

>我通过d3(4.12.2(创建了一个折线图。我想添加鼠标移动事件。这对我来说不是工作。这是我的代码jsfiddle。

谢谢你的帮助。

$(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]) + ")");
        }
    }
});

Answer 1

而不是

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

它应该是

var bisectDate = d3.bisector(function(a, b){ return a[x] - b; }).right;

然后对于平分，为了工作，它假设数据集已排序。

因此，在传递给 bisect 函数之前，像这样对数据进行排序：

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

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

var i = bisectDate(dataset, x0.getTime()); //since x0 is date object.

工作代码在这里

编辑

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

在下面的这一行中。var i = bisectDate(dataset， x0.getTime(((

这里 x0 是一个日期对象。

所以在函数中：

d3.bisector(function(a, b){ return a[x] - b; }).right;

所以 A[X] 是你的unixtime，它是领带印章，B 如前所述也是时间戳。因此，在平分函数中，我们减去两个时间戳以找到最近的点。