Question

我有一个负责生成d3图表的对象：

this.svg = elem
    .selectAll("svg")
    .data([{}])
    .enter()
    .append("svg")

this.axis = this.svg
    .append("g")
    .attr("class", "axis")

// weird block
this.axis
    .selectAll("g.axis-y")
    .data([{}])
    .append("g")
    .attr("class", "axis-y")

this.axis
    .selectAll("g.axis-y")
    .attr("transform", "translate(100,0)")
    .call(yAxis)

此表单中的代码无法生成yAxis。故障位于标有怪异块的块中。如果我改变那个：

this.axis
    .selectAll("g.axis-y")
    .data([{}])

this.axis
    .append("g")
    .attr("class", "axis-y")

然后事情会奏效。我只在两个单独的块中拆分了长方法链。这两者不应该是平等的吗？有人可以解释为什么我有这两种不同的行为？

Answer 1

原因是因为在您的第一个代码示例中，您将追加从数据返回的元素（不存在），而在第二个示例中，您将附加到this.axis元素，该元素来自您的代码是svg元素（this.axis = this.svg）。

为了让您的第一个示例成为工作，您需要在致电enter()后致电data()，如下所示：

this.axis
 .selectAll("g.axis-y")
 .data([{}]).enter()
  .append("g")
  .attr("class", "axis-y")

希望这有帮助。

Answer 2

this.axis
    .selectAll("g.axis-y")
    .data([{}])

this.axis
    .append("g")
    .attr("class", "axis-y")

与

不一样

this.axis
    .selectAll("g.axis-y")
    .data([{}])
    .append("g")
    .attr("class", "axis-y")

这是一样的......

var thisAxis = this.axis
    .selectAll("g.axis-y")
    .data([{}])

thisAxis
    .append("g")
    .attr("class", "axis-y")

D3使用方法链时的不同行为

2 个答案: