d3.js - 是否可以使用 NVD3 创建区域焦点图？

Question

NVD3 是基于 D3 构建的 JavaScript 库包装器。它提供了使用 Crossfilter 为折线图创建画笔效果。

引用如下: http://nvd3.org/ghpages/lineWithFocus.html

我想知道是否也可以为面积图或散点图构建类似的刷牙/聚焦效果？请帮帮我。

Answer 1

我是 NVD3 的新手(截至昨天)，对 D3 有一定的经验，但绝不是高级用户。我一直在处理同样的问题，为自己找到了一个可能有帮助的快乐解决方案。

首先，既然您提到对“散点”图使用类似的焦点/上下文界面，您应该知道 nvd3.models.line LineWithFocus 图表所基于的对象本身实际上是基于 nvd3.models.scatter 构建的。 。我发现这一点是因为为了获得折线图来显示时间刻度的 x 轴标签，您实际上必须使用:chart.lines.scatter.xScale(d3.time.scale());

现在，对于显示填充区域的折线图，您可以像@AmeliaBR评论的那样，使用内置的 chart.isArea(true) (实际上我发现最好设置 lines.isArea(true); lines2.isArea(true); 。这会生成下面完全填充的线条，但正如 @AmeliaBR 提到的，交互会导致一些问题，对我来说，线条相互填充。我想要的东西看起来更像是流图。它最终变得非常简单。我的线条排序良好(跟踪相同点处相同数据的最小值、平均值和最大值)，这对您来说可能不一样，所以也许您需要添加正确设置数据以填写您想要的方式需要一些额外的工作。读取数据时，我为每行设置 y 和 y0 值，如下所示:

    var line_data = [
         {key: "minimum", values: []}, 
         {key: "average", values: []}, 
         {key: "maximum", values: []}];
    data.forEach(function(d) {
    var date = new Date(+d.epoch*1000); //new Date(+d.epoch*1000);
    line_data[0]["values"].push({x: date, y: +d.minimum, y0: +d.average });
    line_data[1]["values"].push({x: date, y: +d.average, y0: +d.average });
    line_data[2]["values"].push({x: date, y: +d.maximum, y0: +d.average });
});

这将进行设置，以便数据在三条线之间绘制两个要填充的形状，一个在最小值和平均值之间(颜色像最小值)，一个在平均值和最大值之间(颜色像最大值)。为了让代码使用该数据，我通过将完整定义从 nv.d3.js 源代码复制到我自己的文件来重载 nv.models.line 对象定义，并进行以下更改:

1. 在顶部，我添加了一个模仿 getX 和 getY 函数的 getY0 函数:

   getX = function(d) { return d.x }

   getY = function(d) { return d.y }

   getY0 = function(d) { return d.y0 }

2. 再往下一点，您会找到 areaPaths = groups.selectAll('path.nv-area') 的定义。就在该 block 下方，另一个 block 以 areaPaths.transition() 开头。同attr('d',...)两个地方都进行了调用。在这两个地方您都需要进行相同的更改。

而不是:.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })

使用:.y1(function(d,i) { return nv.utils.NaNtoZero(y(getY0(d,i))) })

您会注意到该行现在看起来与上面的行几乎完全相同:

.y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })

更改 y0那里到y :

'.y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })

说明:

您的.y0该区域的定义是 d.y行数据的值 您的.y1该区域的定义是 d.y0来自行数据的值

y0()调用包装 getY实际上是对所使用的比例的引用。如果你从 areaPaths 向上看一点在 nv.models.line定义 ，您会看到有一个注释，其中定义了这些: var x0, y0 //used to store previous scales

如果我最初留在 y0() 包装器中，我发现图表最初按照我想要的方式显示，但后来没有正确更新。当我更改所有 y0这些函数中的包装器为 y这使他们能够更新当前的规模而不是之前的规模。从那以后没有遇到任何问题。