Question

我很难理解为什么以下代码对我不起作用。

注意：我使用的是D3 v4。

// DATA JOIN
var dataJoin = vis.svg.selectAll(".group")
  .data(vis.displayData);

// ENTER + UPDATE
var group = dataJoin.enter().append("g")
  .attr("class", "group");

group.append("path") // ENTER
  .attr("class", "line")
  .style("opacity", 0.5)
  .merge(group) // ENTER + UPDATE
    .transition()
    .duration(800)
    .attr("d", function(d) {
      return vis.y(d.beginDate); <------- vis.y() is undefined
    });

对于displayData中的每个元素，我想创建一个沿单独的自定义路径元素（即自定义形状）。每个路径元素都需要使用vis.y（）比例，以便我能够将路径元素放在沿y轴的适当点上。

但是，在.attr函数调用中未定义vis.y（）。 为什么？我已经构建了其他D3可视化（虽然那些使用版本3）并使用了.attr函数调用内部的比例，那么为什么现在有问题？

我基本上是尝试为每个从y轴上不同位置开始的元素添加自定义形状和自定义路径。如果您觉得我的方式不对，请随时给我其他建议。

它使用以下比例：

vis.y = d3.scaleTime()
  .range([vis.height, 0]);

vis.y.domain([
  d3.min(vis.displayData, function(d) { return d.beginDate; }),
  d3.max(vis.displayData, function(d) { return d.endDate; })
]);

数据是一组对象，结构如下：

var obj = {
  name: d.Name,
  type: d.type,
  beginDate: d.beginDate,
  endDate: d.endDate,
  eventDate: d.eventDate
};

Answer 1

我发现了发生了什么，但仍无法解释为什么会发生这种情况。我将提供两个示例，除了一行之外，两个示例完全相同：

Vis未定义

.attr("d", function(d) {
  return d.beginDate;
});

定义了Vis

.attr("d", function(d) {
  return vis.y(d.beginDate);
});

当我说＆＃34;定义＆＃34;时，我的意思是什么？ vs＆＃34; undefined＆＃34;是，当我单步执行代码时，中断return语句，然后键入＆＃34; vis＆＃34;在控制台中，在一种情况下返回一个对象，在另一种情况下，该对象是未定义的。

当我在运行应用程序之前在return语句中声明vis.y（）由于某种原因定义了vis，否则它不是。这些小提琴应该显示破碎和工作行为（虽然，我不能在实际的小提琴中设置一个断点，因为我不知道JS在＆＃34;来源＆＃34;视图中的位置。我跑了他们都在当地。）同样，唯一的区别是上面的一行。

破碎（可见未定义）

https://jsfiddle.net/jtLp2wzg/

工作（定义了vis）

https://jsfiddle.net/39exh1s8/1/

在匿名函数

1 个答案: