CODEWITHSUNDEEP
javascriptnvd3.jsscaling
Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

Draw one chart on the scale of another in NVD3

I have a chart that is made by nvd3 library:

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

that looks like this:

enter image description here

I want to draw other charts with colored regions separately on the same scale as the overall chart. So, that, say, the orange-colored region would be shown on another chart without any other colored regions. I suppose I would need to get the scaling of the chart with all of the colored regions included and feed it into each of the individual ones. I basically want to avoid re-scaling by setting up the initial scale. Any suggestions would be highly appreciated.

Update:

I tried to use the approach proposed in the answer to just set colors of all other clusters to white or transparent and leave only the needed colored region, but I was not able to achieve this due to another issue that I also asked: React component instantiation issue

So, I tried to dig into nvd3 scatterChart code since we can click on the legend circles and the respective colored region disappears. So, definitely by invoking some specific nvd3 scatterChart functions we can make the regions disappear without much of newly written code, but I have a hard time figuring it out.

Upvotes: 1

Views: 45

Answers (2)

Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

The answer turned out to be pretty simple. Here is the code:

...
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);
...

I just needed to use chart.xDomain and chart.yDomain functions. The following thread answered my question:

Changing the y-axis scale in nvd3

Upvotes: 0

Hugo Silva
Hugo Silva

Reputation: 6938

What if you draw the exact same chart but change the color of all regions, but one, to transparent or white?

Upvotes: 1

Related Questions