d3.js - d3拖拽元素之后如何获得对应坐标轴的值

问题描述

问 题

let svg = d3.select('#create')
    .append('svg')
    .attr('id','chart')
    .attr('width',width)
    .attr("height",height);

//定义x轴y轴的比例尺
let xScale = d3.scaleLinear()
    .domain([0,this.sliderMaxVal])
    .range([0,width - padding.left - padding.right])
    .clamp(true);

let yScale = d3.scaleLinear()
    .domain([0,3])
    .range([height - padding.top - padding.bottom,0])
    .clamp(true);

//定义x轴y轴
let xAxis = d3.axisBottom().scale(xScale).ticks(10);
let yAxis = d3.axisLeft().scale(yScale).ticks(3);

//添加X轴y轴
svg.append('g')
    .attr('class','axis')
    .attr('transform','translate(' + padding.left + ',' + (height-padding.bottom) + ')')
    .classed('axis-x',true)
    .call(xAxis);

svg.append("g")
    .attr('class','axis')
    .attr('transform','translate(' + padding.left + ',' + padding.top + ')')
    .classed('axis-y',true)
    .call(yAxis);
               
 //拖拽     
let drag = d3.drag()
    .on("start", function(d){
        console.log("start");
    }).on("end", function(d){
        console.log(d3.mouse(this)[0]);
        console.log("end");
    }).on("drag", function(d){
        d3.select(this.childNodes[0])
            .attr("x",d3.event.x) 
            .attr("y",d3.event.y); 
    });

解决方案

• 根据你x轴和y轴的比例尺定义，x轴轴上数值范围[0, this.sliderMaxVal]，坐标范围[0, width - padding.left - padding.right]，y轴轴上数值范围[0, 3]，坐标范围[height - padding.top - padding.bottom, 0]

• 即如下图：
  

• 按照比例尺，假设屏幕坐标为

$$ (x_0, y_0) $$
屏幕坐标向坐标系坐标转化矩阵为

$$
\begin{bmatrix} \
-\frac{3}{H - PT - PB} & 0 \\
0 & \frac{sliderMaxVal}{W - PL - PR}
\end{bmatrix}
$$

所以，坐标系坐标为

$$
x_1 = -\frac{3 \times x_0}{height - padding \cdot top - padding \cdot bottom} \\
y_1 = \frac{this \cdot sliderMaxVal \times y_0}{width - padding \cdot left - padding \cdot right}
$$

坐标系坐标为
$$
(-\frac{3 \times x_0}{height - padding \cdot top - padding \cdot bottom}, \frac{this \cdot sliderMaxVal \times y_0}{width - padding \cdot left - padding \cdot right})
$$

这篇关于d3.js - d3拖拽元素之后如何获得对应坐标轴的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！