在 NVD3 中以另一张图表的比例绘制一张图表答案

【问题标题】：Draw one chart on the scale of another in NVD3在 NVD3 中以另一张图表的比例绘制一张图表
【发布时间】：2018-02-14 02:39:53
【问题描述】：

我有一张由nvd3 library 制作的图表：

https://github.com/novus/nvd3/blob/master/examples/scatterChart.html

看起来像这样：

我想以与整体图表相同的比例分别绘制具有彩色区域的其他图表。因此，比如说，橙色区域将显示在另一个图表上，而没有任何其他颜色区域。我想我需要获得包含所有彩色区域的图表的缩放比例，并将其输入到每个单独的区域中。我基本上想通过设置初始比例来避免重新缩放。任何建议将不胜感激。

更新：

我尝试使用答案中提出的方法将所有其他集群的颜色设置为 white 或 transparent 并仅保留所需的彩色区域，但由于另一个问题，我无法实现这一点我也问了：React component instantiation issue

所以，我尝试深入研究nvd3scatterChart 代码，因为我们可以单击图例圆圈，相应的彩色区域就会消失。因此，绝对通过调用一些特定的nvd3scatterChart 函数，我们可以使区域消失，而无需太多新编写的代码，但我很难弄清楚。

【问题讨论】：

标签： javascript nvd3.js scaling

【解决方案1】：

如果您绘制完全相同的图表，但将除一个以外的所有区域的颜色更改为透明或白色怎么办？

【讨论】：

这对我来说太复杂了，我做不到。

【解决方案2】：

答案很简单。代码如下：

...
if (this.props.type === "marker") {
      const domainX = [-174, 172];
      const domainY = [169, -184];
      chart.xDomain(domainX);
      chart.yDomain(domainY);
    }
    d3.select(node)
        .datum(data_func)
        .call(chart);
...

我只需要使用chart.xDomain 和chart.yDomain 函数。以下线程回答了我的问题：

Changing the y-axis scale in nvd3

【讨论】：