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

dataconsole.logステートメントに入れたいのですが、ツリーマップが更新されていません。ほとんどのコードは、ツリーマップの例から直接引用しています。

4

1 に答える 1

1

Lars が指摘しているように、divを呼び出すたびに新しい div ( var に割り当てられたもの)を作成しています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 に答える