javascript - d3.event.pageX & d3.mouse(this)[0]

Question

我试图找出“d3.event.pageX”和“d3.mouse(this)[0]”之间的区别。
我猜两者都是一样的，但是，
当我 console.log 两者时，
我的代码中的值与“8”不同。

var height=600;
var width=600;
var graphgap=60;

d3.csv('./details.csv').then(function(data){

var svg =d3.select('section').append('svg')
           .attr('width',600).attr('height',600)
           .on('mousemove',mousemove)

drawrect(data);

})

function drawrect(data){
    let bars=d3.select('svg').selectAll('rect').data(data);
    bars.enter().append('rect').classed('bargraph',true)
        .attr('x',function(d,i){return (i+1)*graphgap})
        .attr('y',function(d){return height-(d.Age)*5})
        .attr('width',55)
        .attr('height',function(d){return (d.Age)*(5)})
}


function mousemove(){
    let mouselocation =[];
    d3.select('svg').append('text')
    .text(d3.event.pageX)
    .attr('x',d3.event.pageX)
    .attr('y',d3.event.pageY)
    console.log(d3.event.pageX)
    console.log(d3.mouse(this)[0])
}

所以，我认为这两个是两个不同的东西。
谁能让我知道为什么它会有所作为？
我试图弄清楚这一点的原因是因为我正在重写下面的代码。

<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv",function(data) {

  // Add X axis --> it is a date format
  var x = d3.scaleLinear()
    .domain([1,100])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 13])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // This allows to find the closest X index of the mouse:
  var bisect = d3.bisector(function(d) { return d.x; }).left;

  // Create the circle that travels along the curve of chart
  var focus = svg
    .append('g')
    .append('circle')
      .style("fill", "none")
      .attr("stroke", "black")
      .attr('r', 8.5)
      .style("opacity", 0)

  // Create the text that travels along the curve of chart
  var focusText = svg
    .append('g')
    .append('text')
      .style("opacity", 0)
      .attr("text-anchor", "left")
      .attr("alignment-baseline", "middle")

  // Create a rect on top of the svg area: this rectangle recovers mouse position
  svg
    .append('rect')
    .style("fill", "none")
    .style("pointer-events", "all")
    .attr('width', width)
    .attr('height', height)
    .on('mouseover', mouseover)
    .on('mousemove', mousemove)
    .on('mouseout', mouseout);

  // Add the line
  svg
    .append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("d", d3.line()
      .x(function(d) { return x(d.x) })
      .y(function(d) { return y(d.y) })
      )


  // What happens when the mouse move -> show the annotations at the right positions.
  function mouseover() {
    focus.style("opacity", 1)
    focusText.style("opacity",1)
  }

  function mousemove() {
    // recover coordinate we need
    var x0 = x.invert(d3.mouse(this)[0]);
    var i = bisect(data, x0, 1);
    selectedData = data[i]
    focus
      .attr("cx", x(selectedData.x))
      .attr("cy", y(selectedData.y))
    focusText
      .html("x:" + selectedData.x + "  -  " + "y:" + selectedData.y)
      .attr("x", x(selectedData.x)+15)
      .attr("y", y(selectedData.y))
    }
  function mouseout() {
    focus.style("opacity", 0)
    focusText.style("opacity", 0)
  }

})

</script>

Answer 1

在文档中写道:

While you can use the native event.pageX and event.pageY, it is often more convenient to transform the event position to the local coordinate system of the container that received the event using d3.mouse, d3.touch or d3.touches.

d3.event

d3.mouse - 使用局部坐标(无边距(60px))

d3.event.pageX - 使用全局坐标(有边距(60px))

但本地坐标从 68px 开始。 我猜想 8 像素是用来描述 y 轴的。