d3.js更新视觉 [英] d3.js updating visual

问题描述

我有一个树图，我放在一起d3.js.我通过getJSON填充数据。它工作伟大。但是，我有一个setInterval方法中的这个功能，它似乎不是刷新本身。

I have a treemap I put together with d3.js. I populate the data via getJSON. It works great. However, I have this functionality in a setInterval method and it doesnt seem to be refreshing itself.

    var treemap = d3.layout.treemap()
.padding(4)
.size([w, h])
.value(function(d) { return d.size; });

var svg = d3.select("#chart").append("svg")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");



function redraw3(json) {
  var cell = svg.data([json]).selectAll("g")
      .data(treemap)
    .enter().append("g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  cell.append("rect")
      .attr("width", function(d) { return d.dx; })
      .attr("height", function(d) { return d.dy; })
      .style("fill", function(d) { return d.children ? color(d.data.name) : null; });

  cell.append("text")
      .attr("x", function(d) { return d.dx / 2; })
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.children ? null : d.data.name; });

}



setInterval(function() {
d3.json("http://localhost:8080/dev_tests/d3/examples/data/flare2.json", function(json) {
redraw3(json);
});
}, 3000);

我的问题是，为什么当我更改json文件中的数据不显示3秒后在树形图中？

My question specifically, is why when I change data in the json file doesn't it show up 3 seconds later in the treemap?

提前谢谢。

推荐答案

数据中有什么？因为如果数据数组具有相同的长度，则 enter（）选择（对应于以前未绑定的数据）将具有零的长度。 Mike Bostock写了一篇很好的教程，名为与加入思考，我建议在你去任何

What's in the data? Because if the data array has the same length, the enter() selection (which corresponds to previously unbound data) will have a length of zero. Mike Bostock wrote a great tutorial called Thinking with Joins, which I would recommend reading before you go any further.

svg.data（）调用似乎多余，为了清楚起见，我建议这样做

The svg.data() call seems redundant, and for clarity's sake I'd recommend doing this instead:

var leaves = treemap(json);
console.log("leaves:", leaves); // so you can see what's happening

// cell here is the bound selection, which has 3 parts
var cell = svg.selectAll("g")
  .data(leaves);
// you might want to console.log(cell) here too so you can take a look

// 1. the entering selection is new stuff
var entering = cell.enter()
  .append("g")
entering.append("rect")
  // [update rectangles]
entering.append("text")
  // [update text]

// 2. the exiting selection is old stuff
cell.exit().remove();

// 3. everything else is the "updating" selection
cell.select("rect")
  // [update rectangles]
cell.select("text")
  // [update text]

单元格，并在输入和更新选择上调用它，因此您不必两次写相同的代码：

You can also encapsulate the updating of cells in a function and "call" it on both the entering and updating selections, so you don't have to write the same code twice:

function update() {
  cell.select("rect")
    // [update rectangles]
  cell.select("text")
    // [update text]
}

entering.append("rect");
entering.append("text");
entering.call(update);

cell.call(update);

这篇关于d3.js更新视觉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！