更新d3.js组中的数据

时间:2015-12-09 12:04:46

标签: javascript d3.js ecmascript-6 data-driven

我创建了一个包含数据值的组:

var group = svg.append("g");
group.data([{color : "green", opacity: 0.3 }]);

如果我想更新这些值,是否需要设置新数据?

group.data([{color : "blue", opacity: 0.3 }]);

或者我可以以某种方式迭代并更新组内的值,例如:

group.data.foreach(d, function() { return d.color = "blue"; })

group.data.foreach(d, function() { return d.opacity += 0.5; })

我的用例是我有一个矩形和圆形的组。该小组也有数据。

var group = svg.append("g");
group.data([{color : "green", opacity: 0.3 }]);

var line = group.append("rect");
line.attr("x", self.xWorldToGraph(xx) - self.lineWidth / 2)
  .attr("y", self.yWorldToGraph(yy))
  .attr("width", self.lineWidth)
  .attr("height", height)
  .style("stroke", function(d) { return d.color; })
  .style('stroke-opacity', function(d) { return d.opacity; })

group.append("circle")
  .attr("cx", self.xWorldToGraph(xx))
  .attr("cy", self.yWorldToGraph(yy))
  .attr("r", 50)
  .style("stroke", function(d) { return d.color; })
  .style('stroke-opacity', function(d) { return d.opacity; })

现在我想更新组颜色,这样圆和矩形也会改变颜色。

1 个答案:

答案 0 :(得分:1)

切换数据后,

p21不会“自动”重绘。你必须通过再次调用.style函数来“告诉”它已经改变了数据(在输入,更新,退出模式中,这是一个更新)。

以下是使用您的代码的示例:

#' Find position of a point along a line from x1 to x2
point_on_line <- function(x1, x2, d, absolute=TRUE) {
    v <- x2 - x1
    if (!absolute) v <- v / len(v)
    x1 + d * v
}

p1 <- c(0,0,0)
p2 <- c(1,1,0)
p3 <- c(1,1,1)

(p21 <- point_on_line(p2, p1, .10))
(p23 <- point_on_line(p2, p3, .10))
points3d(rbind(p21, p23), size=10, col="red")