更新拉丝面积图的y轴 [英] Update the y-axis of a brushed area chart

问题描述

我使用的是d3.js，我正在修改此示例的有刷区域图表。除了基于画笔的x轴改变之外，我想基于刷子内的数据的y值重绘图表的y轴（类似于 Google财经图表）。

我已经得到了功能的工作，但只有一种方式，使刷子可以在x和y空间绘制。我这样做首先添加ay规模到刷变量：

  var brush = d3.svg.brush（）
 .x（x2）
 .y（y2）
 .on（brush，brush）; 
  

这会使 brush.extent（） return下面的多维数组： [[x0，y0]，[x1，y1]] 。然后，我在 brush（）函数中使用这些数据重新定义焦点图表的x-和y-域：

  function brush（）{
 var extent = brush.extent（）; 
 x.domain（brush.empty（）？x2.domain（）：[extent [0] [0]，extent [1] [0]]）; 
 y.domain（brush.empty（）？y2.domain（）：[extent [0] [1]，extent [1] [1]]）; 
 focus.select（path）。attr（d，area）; 
 focus.select（。x.axis）。call（xAxis）; 
 focus.select（。y.axis）。call（yAxis）; 
} 
  

这样可以工作，但是通过在brush变量中定义y标度，现在可以在焦点图表中拖动框，而不只是能够如原始图表中那样向西向西拖动。

基本上，我的问题是： strong>如何获取属于画笔区域内的值范围，而不是画笔区域本身的范围？这是否可能？

d3的画笔文档是此处。

我使用刷过滤的x.domain来过滤掉我的原始文件数据集。这个新的过滤数据集只有属于画笔的值：

  //使用x.domain过滤数据，然后找到这个新集合的最大和最小持续时间，然后将y.domain设置为
 x.domain（brush.empty（）？x2.domain（）：brush.extent（））; 
 var dataFiltered = data.filter（function（d，i）{
 if（（d.date> = x.domain（）[0]）&&（d.date< = x.domain（）[1]））{
 return d.duration; 
} 
}）
 y.domain（[0，d3.max（dataFiltered.map （function（d）{return d.duration;}））]）; 
  

最后，确保重绘y轴以及x轴：

  focus.select（path）。attr（d，area）; 
 focus.select（。x.axis）。call（xAxis）; 
 focus.select（。y.axis）。call（yAxis）; 
  

I am using d3.js, and I'm working on a brushed area chart by modifying this example. In addition to the x-axis changing based on the brush, I'd like chart's y-axis to be redrawn, based on the y-values of the data that fall within the brush (similar to the behavior of a Google Finance chart).

I have gotten the functionality working, but only in a way that enables the brush to be drawn in both x- and y-space. I did this by first adding a y scale to the brush variable:

var brush = d3.svg.brush()
    .x(x2)
    .y(y2)
    .on("brush", brush);

This makes brush.extent() return the following multi-dimensional array: [ [x0, y0], [x1, y1] ]. I then use this data in the brush() function to redefine the x- and y- domain for the focus chart:

function brush() {
  var extent = brush.extent();
  x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]);
  y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]);
  focus.select("path").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}

This works, but by defining the y scale in the brush variable, the user can now drag 'boxes' in the focus chart, rather than only being able to drag west to east, as in the original chart.

Essentially, my question is: how do I get the range of values that fall within a brush's area, rather than the range of the brush's area itself? Is this even possible?

d3's brush documentation is here.

解决方案

I came up with a solution.

I used the brush-filtered x.domain to filter down my original data set. This new filtered data set has only the values that fall within the brush:

// Use x.domain to filter the data, then find the max and min duration of this new set, then set y.domain to that
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  var dataFiltered = data.filter(function(d, i) {
    if ( (d.date >= x.domain()[0]) && (d.date <= x.domain()[1]) ) {
      return d.duration;
    }
  })
  y.domain([0, d3.max(dataFiltered.map(function(d) { return d.duration; }))]);

Finally, be sure to redraw the y-axis as well as the x-axis:

focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
focus.select(".y.axis").call(yAxis);

这篇关于更新拉丝面积图的y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！