javascript - 如何重绘图表: d3. js链接函数和crossfilter过滤

Question

编辑:JSBin 不起作用，转到 JS fiddle查看我的代码

我正在使用 d3 和 crossfilter 进行 self 训练，但遇到了一些困难。
我正在尝试创建一个链接函数来创建条形图。 这个想法是不要为我想要创建的每个条形图一次又一次地编写所有代码。
我受到这个例子的启发 Fast Multidimensional Filtering for Coordinated Views这就是我想做的(你可以找到代码 Here )。

但我想在我的通用 barChart 函数中添加一些个人风格。
我决定像示例中那样使用链接函数来完成此操作。
我了解如何创建尽可能多的图形，但我不明白，(当画笔事件出现时)，如何根据过滤器重绘所有栏。

如果我想在函数之外执行此操作，我会再次定义所有属性，如 x、y、轴等，具体取决于新数据，即过滤后的数据，如下所示:

var updateRange = function(filt){
    data = dimension.filter(filt) //assuming dimension is a crossfilter dimension
    // Scale the range of the data again 
x.domain([0, d3.max(data, function(d) { return d.key; })+1]);

// Select the section we want to apply our changes to

var chart = d3.select(".chart")
//Update all rects

chart.selectAll("rect.hidden")
   .data(data)
   .transition()
   .delay(function(d, i) {
        return i * 50;
    })
   .duration(500)
   .attr("y", function(d) {
        return y2(d.value);
   })
   .attr("height", function(d) {
        return height - y2(d.value);
});

我做了一个JSBin讨论如何更新图表。
这就是我使用的画笔功能。

brush.on("brushstart", function() {
  var div = d3.select(this.parentNode.parentNode.parentNode);
  div.select(".title a").style("display", null);
});

brush.on("brush", function() {
  var g = d3.select(this.parentNode),
    extent = brush.extent();
  if (round) g.select(".brush")
    .call(brush.extent(extent = extent.map(round)))
    .selectAll(".resize")
    .style("display", null);
  g.select("#clip-" + id + " rect")
    .attr("x", x(extent[0]))
    .attr("width", x(extent[1]) - x(extent[0]));
  dimension.filter(extent);
});

brush.on("brushend", function() {
  if (brush.empty()) {
    var div = d3.select(this.parentNode.parentNode.parentNode);
    div.select(".title a").style("display", "none");
    div.select("#clip-" + id + " rect").attr("x", null).attr("width", width);
    dimension.filterAll();
  }
)};

等待您的评论，
克里斯。

编辑:一些说明

更清楚地说，当我渲染图表并使用画笔时，数据已正确过滤。 (如果我输入一些 console.log，我会看到根据画笔过滤的数据)
但图表不会根据画笔更新。我知道问题来自于我使用画笔事件的方式 (brush.on()。
我认为我需要以某种方式调用渲染函数，但不知道如何将链接函数应用于所有图表。

编辑:使用外部画笔更新图表

现在，当从外部设置画笔时(通过单击链接)，图表可以成功更新。
只需添加此行

if (brushDirty) {
  brushDirty = false;
  g.selectAll(".brush").call(brush);
  div.select(".title a").style("display", brush.empty() ? "none" : null);
  if (brush.empty()) {
    g.selectAll("#clip-" + id + " rect")
        .attr("x", 0)
        .attr("width", width);
  } else {
    var extent = brush.extent();
    g.selectAll("#clip-" + id + " rect")
        .attr("x", x(extent[0]))
        .attr("width", x(extent[1]) - x(extent[0]));
  }
}

Answer 1

为了更新图表，您可以将其删除，然后使用新的过滤器重新绘制。 像这样的事情:

 d3.selectAll(".chart").selectAll("svg").remove();

或者

 $('#chart'+chart_id+' svg').remove();

然后通过使用更新的数据再次调用绘图函数来重新绘制它。

希望这对您有帮助。抱歉，如果我误解了你。我需要训练我的英语=P

编辑:

我发现这些例子没有删除。它可能对你有帮助。

http://jsfiddle.net/sx9myywh/

https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01