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

问题描述

我正在使用 d3 编写甘特图

i am writing a Gantt Chart using d3

我有 xScale 和 Time Scale(Time)

i have xScale with Time Scale(Time)

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

和 yScale 作为波段尺度(资源)

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. 矩形不应该在资源之间，所以需要根据 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. 在 xAxis 中，时间刻度具有反转但 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 获得波段尺度的反转值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！