Question

我在D3方面遇到了一些关于变量范围的问题。

我试图绘制两行代表函数集成的限制。我有两条线但是我在限制它们可以假设的x值时遇到了问题。

我限制了两条线仅在我的函数非零且为正时才存在，但是线A只能假设低于或等于线B的值而线B应该只假设大于或等于线A的值。

这是我的A行代码.B行的代码类似，功能相同：

function initDragLines () {
    var svg = d3.select("#svg");
    var lineA = svg.append("line");
    var min_x = 45;
    var max_x = 455;

    var dragA = d3.behavior.drag()
        .on('dragstart', null)
        .on('drag', function(d) {
            var dx = d3.event.x;
            var x1a = dx > max_x ? max_x : dx < min_x ? min_x : dx;
            //Should be something like x1b = dx > x1b ? x1b : dx < min_x ? min_x : dx;

            lineA.attr("x1", x1a)
                .attr("x2", x1a);

        })
        .on('dragend', function() {});

    lineA.attr("x1", 45) 
        .attr("y1", 143)
        .attr("x2", 45)
        .attr("y2", 370)
        .attr("stroke-width", 5)
        .attr("stroke", "black")
        .call(dragA);
}

当我尝试将x1a或x1b的值传递到另一行时会出现问题，因为它们无法看到对方。我甚至不确定是否能够/传递x1a或x1b等值。

我试图弄乱函数（d）和返回语句但是那种类型的任何东西对我都没有用。任何帮助，将不胜感激。谢谢你们。

编辑：删除了一些与功能无关的辅助代码。

Answer 1

对不起，伙计们，完全忘记了这篇文章，我只知道该怎么做。通过引入x1aPass，x1bPass和虚拟变量来解决这个问题。

代码如下：

function dragLineA (dummyA) {

var dragA = d3.behavior.drag()

.on('dragstart', null)
.on('drag', function(d) {
    var dx = d3.event.x;
    var x1a = dx > x1bPass ? x1bPass  : dx < min_x ? min_x : dx;
    x1aPass = x1a;

    lineA.attr("x1", x1a).attr("x2", x1a)  

 }).on('dragend', function() {});

lineA.attr("x1", 45).attr("y1", 145).attr("x2", 45).attr("y2", 370).attr("stroke-width", 5).attr("stroke", "black").call(dragA);

lineA.on({
  "mouseover": function(d) {
    d3.select(this).style("cursor", "ew-resize"); 
  },
})  
}

function dragLineB (dummyB) {

var dragB = d3.behavior.drag()
.on('dragstart', null)
.on('drag', function(d) {
var dx = d3.event.x;
var x1b = dx > max_x ? max_x : dx < x1aPass ? x1aPass : dx;
    x1bPass = x1b;

lineB.attr("x1", x1b).attr("x2", x1b);

}).on('dragend', function() {});

lineB.attr("x1", 455).attr("y1", 145).attr("x2", 455).attr("y2", 370).attr("stroke-width", 5).attr("stroke", "blue").call(dragB);

 lineB.on({
  "mouseover": function(d) {
    d3.select(this).style("cursor", "ew-resize"); 
  },
});

}

D3行和范围

1 个答案: