Question

我正在制作一个多线图，我已经实现了一个刷子，可以放大x轴上的特定域。但是，当我放大时，我希望y轴按比例缩放，使其域从[0, maxY]开始，其中maxY是x轴上当前选择的最大y值。要生成我正在使用d3.line()的行（它具有x和y值之间的连接）。这就是我目前计算maxY值的方式：

//Find max and min values in data to set the domain of the y-axis
var maxArray = updatedData.map(function(variable){
  //First map the values in the array to a new array
  var valuesArray = variable.values.map(function(d){
    return d.value;
  })
  //Find max value in array
  return Math.max(...valuesArray);
});
var maxY = Math.max(...maxArray);

这是我设置比例并创建d3.line()：

的地方

var xScale = d3.scaleTime()
  .range([0, chartWidth]);
var yScale = d3.scaleLinear()
  .domain([0, maxY])
  .range([chartHeight, 0]);

var brush = d3.brushX()
  .on("end", brushend);

var line = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) {return xScale(d.date)})
  .y(function(d) {return yScale(d.value)})

//Save this to be able to zoom back out
var originalDomain = [new Date(data[0].Timestamp), new Date(data[data.length-1].Timestamp)];
xScale.domain(originalDomain);

以下是我设置新xScale.domain()并放大该间隔的代码（在刷牙结束时调用）：

function brushend(){
  //sourceEvent - the underlying input event, such as mousemove or touchmove.
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var brushInterval = d3.event.selection; //The interval of the current brushed selection
  //If the function is called with no selection: ignore
  if(!brushInterval) return;
  //Enable reset button
  resetButton.attr("disabled", null)
    .on("click", resetAxis);

  var newDomain = brushInterval.map(xScale.invert, xScale);

  //TODO: Find max and min values in data to set the domain of the y-axis

  xScale.domain(newDomain);
  chart.selectAll(".line")
    .transition()
    .duration(1000)
      .attr("d", function(d){ return line(d.values)});
  chart.select(".x-axis")
    .transition()
    .duration(1000)
      .call(xAxis);
  //Remove the visual brush
  d3.select(".brush").call(brush.move, null);
}

我想要做的是找到当前所选域中的最大y值。我知道我可以过滤数据值以删除不在当前所选域中的数据值，然后从中计算最大值（就像我对原始域所做的那样）。但似乎应该有一个更容易的解决方案。我在d3.line()的文档中找不到可以计算最大值的任何函数。

有没有简单的方法来计算d3.line()的最大值？

由于

Answer 1

对于此，实际上没有更简单的解决方案，因为您必须以某种方式过滤值，以便仅考虑所选x域中的值。但是，使用对d3.max()的两次嵌套调用，您至少可以给它一个愉快的外观，并通过避免对.filter()的额外调用来节省一些迭代。由于d3.max()会忽略null值，因此如果当前数据位于x域的边界之外，则可以通过返回null来使用它来过滤您的值。要获得最大值，您可以使用以下内容：

const maxY = xDomain => d3.max(updatedData, variable => d3.max( variable.values, v => v.Timestamp >= xDomain[0] && v.Timestamp <= xDomain[1] ? v.value : null ) );

请查看以下代码片段以了解正常工作：

＆＃13;
＆＃13;
var updatedData = [{ values: [{Timestamp:0, value:1},{Timestamp:1, value:5},{Timestamp:2, value:10},{Timestamp:3, value:3},{Timestamp:4, value:30}] }, { values: [{Timestamp:0, value:19},{Timestamp:1, value:12},{Timestamp:2, value:13},{Timestamp:3, value:8},{Timestamp:4, value:50}] }]; const maxY = xDomain => d3.max(updatedData, variable => d3.max( variable.values, v => (!xDomain || v.Timestamp >= xDomain[0] && v.Timestamp <= xDomain[1]) ? v.value : null ) ); console.log(maxY()); // Default, check all values: max 50 console.log(maxY([1,3])); // Max 13 console.log(maxY([0,3])); // Max 19
＆＃13;
<script src="https://d3js.org/d3.v4.js"></script>
＆＃13;
＆＃13;
＆＃13;

D3js - 从特定域的d3.line（）获取最大值

1 个答案: