在NVD3中绘制另一个图表

时间:2018-02-14 02:39:54

标签: javascript nvd3.js scaling

我有一个由nvd3库制作的图表:

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

看起来像这样:

enter image description here

我想以与整体图表相同的比例分别绘制带有彩色区域的其他图表。因此,比方说,橙色区域将显示在另一个图表上,没有任何其他颜色区域。我想我需要将包含所有彩色区域的图表缩放,并将其输入每个单独的区域。我基本上想通过设置初始比例来避免重新缩放。任何建议都将受到高度赞赏。

更新

我尝试使用答案中提出的方法将所有其他群集的颜色设置为whitetransparent,并仅留下所需的彩色区域,但我无法实现此目的另一个我也问过的问题:React component instantiation issue

所以,我试图深入研究nvd3 scatterChart代码,因为我们可以点击图例圆圈,相应的彩色区域会消失。因此,通过调用一些特定的nvd3 scatterChart函数,我们可以使区域消失而不需要新编写的代码,但我很难搞清楚它。

2 个答案:

答案 0 :(得分:1)

如果您绘制完全相同的图表但将所有区域的颜色更改为透明或白色会怎样?

答案 1 :(得分:0)

答案结果非常简单。这是代码:

...
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.xDomainchart.yDomain函数。以下主题回答了我的问题:

Changing the y-axis scale in nvd3