Question

我用d3（4.12.2）创建了一个lineChart。我想添加鼠标移动事件。这对我不起作用。这是我的代码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，使其假设数据集已经排序。

所以在传递给bisect函数之前对数据进行排序：

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

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

var i = bisectDate(dataset, x0.getTime()); //since {X0 {1}}

工作代码here

修改

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

在下面这一行。 var i = bisectDate（dataset，x0.getTime（））

此处 x0 是日期对象。

所以在函数中：

is date object.

所以a [x]是你的d3.bisector(function(a, b){ return a[x] - b; }).right;，它是领带印章，b所提到的也是时间戳。所以在平分函数中我们减去两个时间戳以找到最接近的点。

D3 LineChart鼠标移动和显示点

1 个答案: