Question

我试图通过在d3 svg对象上拖动圆来更改全局变量：

var drag = d3.behavior.drag()  
         .on('dragstart', function() { d3.select(this).style('fill', 'red'); })
         .on('drag', function(d,i) { d3.select(this).attr('cx', d3.event.x)
                                        .attr('cy', d3.event.y); dataset[i] = d; console.log(dataset);})
         .on('dragend', function() { d3.select(this).style('fill', 'black'); });

执行控制台日志但未显示任何更改，即使在释放拖动的圆圈后，数据集也不会更新。这是我试图阅读的异步性，还是我的其他一些错误？我们的想法是更新与节点位置匹配的线图。

Answer 1

好消息：您更改了值，您的数据集正在更新，这不是问题。

此处的问题非常简单：d与dataset[i]的相同。让我们证明一下：

＆＃13;

var dataset = [12, 55, 21, 76, 42];

d3.select("foo")
  .data(dataset)
  .enter()
  .append("foo")
  .attr("foo", function(d, i) {
    console.log("d: " + d + " - dataset[i]: " + dataset[i])
  })

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

因此，当你这样做时：

dataset[i] = d

你为同样的事情改变了一些东西。

这是一个使用你的代码的演示（差不多，因为我在这里使用v4）。我写了dataset[i] = d而不是dataset[i] = d + "foo"。拖动一个圆圈，看看控制台：

＆＃13;

var svg = d3.select("svg");

var dataset = d3.range(5);

var circles = svg.selectAll("foo")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 20 + 40 * d
  })
  .attr("r", 15)
  .attr("fill", "teal")
  .call(d3.drag()
    .on('start', function() {
      d3.select(this).style('fill', 'red');
    })
    .on('drag', function(d, i) {
      d3.select(this).attr('cx', d3.event.x)
        .attr('cy', d3.event.y);
      dataset[i] = d + "foo";
      console.log(JSON.stringify(dataset));
    })
    .on('end', function() {
      d3.select(this).style('fill', 'black');
    }));

＆＃13;

.as-console-wrapper { max-height: 20% !important;}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

从拖动侦听器中更改全局变量

1 个答案: