Javascript d3.event.pageX&；d3.鼠标（此）[0]

我试图找出'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>

//设置图形的尺寸和边距
var margin={顶部：10，右侧：30，底部：30，左侧：60}，
宽度=460-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取数据
d3.csv（“https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv，函数（数据）{
//添加X轴-->它是一种日期格式
var x=d3.scaleLinear（）
.domain（[1100]）
.范围（[0，宽度]）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
变量y=d3.scaleLinear（）
.domain（[0,13]）
.范围（[高度，0]）；
svg.append（“g”）
.调用（d3.左（y））；
//这样可以找到鼠标最近的X索引：
var-bisect=d3.平分线（函数（d）{return d.x；}）；
//创建沿图表曲线移动的圆
var focus=svg
.append（'g'）
.append（'圆'）
.style（“填充”、“无”）
.attr（“笔划”、“黑色”）
.attr（'r'，8.5）
.style（“不透明度”，0）
//创建沿图表曲线移动的文本
var focusText=svg
.append（'g'）
.append（'文本'）
.style（“不透明度”，0）
.attr（“文本锚定”、“左”）
.attr（“路线基线”、“中间”）
//在svg区域顶部创建一个矩形：该矩形恢复鼠标位置
svg
.append（'rect'）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）
.attr（'width'，width）
.attr（'height'，height）
.on（'mouseover'，mouseover）
.on（'mousemove'，mousemove）
.on（'mouseout'，mouseout）；
//添加行
svg
.append（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1.5）
.attr（“d”，d3.line（）
.x（函数（d）{返回x（d.x）}）
.y（函数（d）{返回y（d.y）}）
)
//当鼠标移动->在正确位置显示注释时会发生什么。
函数mouseover（）{
焦点样式（“不透明度”，1）
focusText.style（“不透明度”，1）
}
函数mousemove（）{
//恢复我们需要的坐标
var x0=x.invert（d3.鼠标（this）[0]）；
var i=对分（数据，x0，1）；
selectedData=数据[i]
集中
.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））
}
函数mouseout（）{
focus.style（“不透明度”，0）
focusText.style（“不透明度”，0）
}
})

文档中的内容是：

虽然可以使用本机event.pageX和event.pageY，但通常 更方便地将事件位置转换为本地 使用接收事件的容器的坐标系 d3.鼠标、d3.触摸或d3.触摸

d3.鼠标-使用局部坐标（无边距（60px））

d3.event.pageX-使用全局坐标（带边距（60px））

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

---

我按以下方向保存。非常感谢您如此富有洞察力的回答，并真的帮助了我。