d3.event.pageX& d3.mouse（this）[0] [英] d3.event.pageX & d3.mouse(this)[0]

问题描述

我试图弄清楚d3.event.pageX和‘d3.mouse（this）[0]’。
我猜都是一样的，但是，当我在console.log和login.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 ）; 
 
}）
 
函数drawrect（data）{
 let bars = d3.select（'svg'）。selectAll（'rect'）。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（）{
让鼠标定位= []; 
 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]）
} 
  

所以，我认为这两件事是两回事。
谁能让我知道为什么会有所作为吗？
之所以尝试找出原因，是因为我正在重新编写下面的代码。

 <脚本> 
 
 //设置图形的尺寸和边距
 var margin = {顶部：10，右侧：30，底部：30，左侧：60}，
宽度= 460 -margin.left-margin.right，
高度= 400-margin.top-margin.bottom; 
 
 //将svg对象附加到页面主体
 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 +））; 
 
 //读取数据
 d3.csv（ https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv，function （数据）{
 
 //添加X轴->这是一种日期格式
 var x = d3.scaleLinear（）
 .domain（[1,100]）
 .range（[0，width]）; 
 svg.append（ g）
 .attr（ transform， translate（0， + height +））
 .call（d3.axisBottom（x））; 
 
 //添加Y轴
 var y = d3.scaleLinear（）
 .domain（[0，13 ]）
 .range（[height，0]）; 
 svg.append（ g）
 .call（d3.axisLeft（y））; 
 
 //这样可以找到最接近鼠标的X索引：
 var bisect = d3.bisector（function（d）{return dx;}）。left; 
 
 //创建沿图表
曲线移动的圆var focus = svg 
 .append（'g'）
 .append（'circle'）
 .style（ fill，  none）
 .attr（ stroke， black）
 .attr（'r'，8.5）
 .style（ opacity，0）
 
 // Cre吃了沿图表
曲线传播的文本var focusText = svg 
 .append（'g'）
 .append（'text'）
 .style（ opacity ，0）
 .attr（ text-anchor， left）
 .attr（ alignment-baseline， middle）
 
 //创建一个矩形在svg区域的顶部：此矩形恢复鼠标位置
 svg 
 .append（'rect'）
 .style（ fill， none）
 .style（ 指针事件，全部）
 .attr（'width'，width）
 .attr（'height'，height）
 .on（'mouseover'，mouseover）
 .on（'mousemove'，mousemove）
 .on（'mouseout'，mouseout）; 
 
 //添加行
 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（dx）}）
 .y（function（d）{return y（dy）}）
）
 
 
 //鼠标移动->在正确的位置显示注释。 
 function mouseover（）{
 focus.style（ opacity，1）
 focusText.style（ opacity，1）
} 
 
 function mousemove（）{
 //恢复坐标，我们需要
 var x0 = x.invert（d3.mouse（this）[0]）; 
 var i = bisect（data，x0，1）; 
 selectedData = data [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（ opacity，0 ）
 focusText.style（ opacity，0）
} 
 
}）
 
< / script> 
  

解决方案

在文档中写道：

虽然可以使用本机event.pageX和event.pageY，但通常
更方便将事件位置转换为本地$ b $使用
d3.mouse，d3.touch或d3.touches接收事件的容器的b坐标系。

I tried to figure out the difference between 'd3.event.pageX' & 'd3.mouse(this)[0]'. I guessed both are same but, when I console.log both, the value was different by '8' in my code.

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])
}

So, I think these two are two different things. Can anyone let me know why it makes a difference? The reason why I tried to figure this out is because I was re-writing the code below.

<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>

解决方案

In documentation is written:

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 - uses local coordinate (without margin (60px))

d3.event.pageX - uses global coordinate (with margin (60px))

But local cordinate start on 68px. I guess 8 pixels is used to describe the y-axis.

这篇关于d3.event.pageX& d3.mouse（this）[0]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！