Question

目前我正在学习D3.js并面临一个问题。我的问题是，当我尝试将散点图添加到我的折线图时，这些图呈现在错误的位置。我真的不知道自己错过了什么。

负责在mousemove事件上绘制散点图的函数：

 ´var rect = svg.append("rect")
        .attr("class", "zoom")
        .attr("width", width)
        .attr("height", height)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom)
        .on('mousemove', function() {
            var coords = d3.mouse(container.node());
            // Value on the x scale corresponding to this location
            var xVal = x.invert(coords[0]);
            var d = new Date(xVal.getTime());

            //show the closest point on the left
            var i = 0;
            while (i < JSONdata.measurementPoints.length - 1 && new Date(JSONdata.measurementPoints[i].measurementDateTime) <= d) {
                i++;
            }

            var _date = new Date(JSONdata.measurementPoints[i].measurementDateTime),
                _temp = JSONdata.measurementPoints[i].measurementValue;
            d3.select("#actPoint").remove();
            // Update the position of the activePoint element
            d3.select('svg').append('circle')
                .attr("cx", x(_date))
                .attr("cy", y(_temp))
                .attr("r", 5)
                .attr("pointer-events", "none")
                .attr("id", "actPoint")
                .style({
                    'stroke': 'none',
                    'fill': 'red',
                    'fill-opacity': 0
                });

            console.log(JSONdata.measurementPoints[i].measurementDateTime);
            console.log(JSONdata.measurementPoints[i].measurementValue);
        });´

我认为在这个功能的某个地方我做错了什么，希望你能帮我弄清楚问题是什么：）

Codepen：http://codepen.io/laczko090/pen/jrRPBZ

提前致谢！

Answer 1

最后我找到了一个似乎有效的解决方案，我将边距值添加到了点位置，现在看起来正确对齐。

´d3.select('svg').append('circle')
                .attr("cx", x(_date)+40)
                .attr("cy", y(_temp)+20)
                .attr("r", 5)
                .attr("pointer-events", "none")
                .attr("id", "actPoint")
                .style({
                    'stroke': 'none',
                    'fill': 'red',
                    'fill-opacity': 0
                });´

D3.js散点图在线图上未正确对齐

1 个答案: