d3获得Band Scales的反转值 [英] d3 getting invert value of Band Scales

问题描述

我正在使用d3写一个甘特图

i am writing a Gantt Chart using d3

我有时间刻度的xScale（时间）

i have xScale with Time Scale(Time)

this.xScale = d3.scaleTime()
            .domain([this.startDate,this.endDate])
            .range([0,this.getWidth()]);

和yScale作为Band Scale（资源）

and yScale as Band Scale (Resources)

this.yScale = d3.scaleBand()
        .domain(resources.map(function(res){
            return res.res_num;
        }))
        .rangeRound([0,this.getHeight()])
        .paddingInner(.3)

问题是我需要将任务（SVG Rect）从一个资源拖放到另一个资源

Problem is i need to drag and drop the task( SVG Rect) from one resource to another resources

当我拖动我正在使用transfrom所以它在SVG上移动

When i drag i am using the transfrom so its moving on the SVG

_onDrag : function(d)
    {
        var x = d3.event.dx+d3.event.x;
        var y = d3.event.dy+d3.event.y;
        d3.select(this).raise().attr("transform","translate(" + [x,y] + ")");
    },

但是在下降时我必须处理如下逻辑：

But on drop i have to handle the logic as below:

1. rect不应该在资源之间，因此需要转换为基于d3.event.y的任何波段
   
   

1. the rect should not be in between the resources, so need to transform to any band based on d3.event.y

1. 在xAx中是具有反转的时间刻度，但yScale没有这个。这该怎么做？

推荐答案

解决方法如下所示我不知道这是标准方式，如果有任何其他方式请回答。

Solved this as below but i don't know this is standard way, if any other way please answer to this.

var eachBand = self.yScale.step();
var index = Math.round((d3.event.y / eachBand));
var val = self.yScale.domain()[index];

eachBand 给出带的大小，以像素为单位
我将y值（拖动事件）除以eachBand我将获得给出yScale值的索引

eachBand gives the size of the band in pixels if i divide the y value (drag event) by the eachBand i will get the index which gives the yScale value

这篇关于d3获得Band Scales的反转值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！