0

我正在尝试更新树形图中的元素：

    drawTreeMap = (data) ->
      margin =
        top: 0
        right: 0
        bottom: 0
        left: 0

      width = window.innerWidth
      height = window.innerHeight
      color = d3.scale.category20c()

      treemap = d3.layout.treemap().size([width, height]).sticky(true).value((d) -> d.size)

      div = d3.select("body").append("div")
        .style("position", "relative")
        .style("width", (width + margin.left + margin.right) + "px")
        .style("height", (height + margin.top + margin.bottom) + "px")
        .style("left", margin.left + "px")
        .style("top", margin.top + "px")

      node = div.datum(data).selectAll(".node")
          .data(treemap.nodes)

      node.enter()
          .append("div")
            .attr("class", "node")
            .call(position)
            .style("background", (d) -> (if d.children then color(d.name) else null))
            .on "click", ->
              el = d3.select(this)
              data = el[0][0].__data__
              while (data.parent.parent)
                data = data.parent
              console.log("updated to data:")
              console.log(data)
              drawTreeMap(data)
              #updateTreemap(div, treemap, data)

      node.exit()
        .remove()

      node.transition().duration(1500).call position

data是我希望它在console.log声明中的内容，但树形图没有得到更新。大多数代码直接来自树形图示例。

4

1 回答 1

1

就像 Lars 指出的那样，div每次调用drawTreeMap(). 对于初学者，您需要简单地将该 div 创建移到外部，drawTreeMap以便它只运行一次。或者，如果你想变得花哨，你可以把创建留在函数中，但是做这样的事情：

div = d3.select("body").selectAll("div.treemap-container").data([null])
div.enter()
  .append('div')// only creates the div the first time this runs
  .attr('class', 'treemap-container')
  // etc...

这是我能看到的唯一奇怪的事情。也许还有另一个错误，但如果没有工作的 jsFiddle 就很难追踪。如果你能提供一个，在这里发表评论，我会进一步看看。

顺便说一句，对于风格，而不是这样做：data = el[0][0].__data__，你应该这样做：data = el.datum()

最后，请注意您没有为数据绑定使用键功能，因此即使您让树形图重新渲染，也不会有对象持久性（即现有的 div 可以任意重新分配给不同的数据点）。

于 2013-11-12T21:58:18.233 回答