D3: Utilizing multiple line charts in Zoom to effectively merge their data arrays

I encountered an issue with my charts while trying to implement zoom functionality. Initially, I have a chart displaying random data and when I add another chart on top of it, the zooming feature copies data from the second chart onto the first one instead of working independently.

If you check out the example provided, you'll see a blue chart. Clicking the button adds a green chart on top of it. When attempting to zoom in, the blue chart seems to disappear, but it's actually just hidden behind the green one, despite both charts having distinct data sets.

Check out the example: https://codesandbox.io/s/31lz6zrln5

Any suggestions or solutions would be greatly appreciated!

Warm regards, Mirco

javascripttypescriptd3.js

Answer №1

Within the button callback function, the data elements are being modified.

  filtered = () => {
    const values = [...data].map(d => {
      d.value = rnd(25, 75);
      return d;
    });
    this.chart.filtered(values);
  };

It is advisable to create new objects based on the fields of the existing objects

  filtered = () => {
    const values = [...data].map(d => {
      return { timestamp: d.timestamp, value: rnd(25, 75) };
    });
    this.chart.filtered(values);
  };

Moreover, ensure to update the filtered path in the zoom callback as well

  public zoom = () => {
    const newXScale = event.transform.rescaleX(this.xScale);
    const newYScale = event.transform.rescaleY(this.yScale);

    this.xAxisGroup.call(this.xAxis.scale(newXScale));
    this.yAxisGroup.call(this.yAxis.scale(newYScale));

    this.xGridGroup.call(this.xGrid.scale(newXScale));
    this.yGridGroup.call(this.yGrid.scale(newYScale));

    this.line.x(d => newXScale(d.timestamp)).y(d => newYScale(d.value));

    this.lineGroup.attr("d", this.line as any);
    this.lineFiltered.attr("d", this.line as any); // removed the comment of this line
  };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Module not discovered by nodeJS within the current directory

In my node application, I am trying to incorporate a module called dishRouter. The file structure looks like this :- Structure The dishRouter is exported from Dishes/index.js and imported into my app.js using the following code: var dishRouter = re ...

javascriptnode.jsexpressmodule

One jQuery plugin was functioning perfectly, while the other one was failing to work as expected

I am working on a simple HTML file that includes a heading and two empty div elements. <h1>Blablabla.</h1> <div id="div1"></div> <div id="div2"></div> These two divs need to be populated with SVG content generated usin ...

javascriptjquerysvg

Import data from JSON using JavaScript

I have a collection of txt files that contain custom content. The file names are stored in a JSON array. { txtFiles: ['./file1.txt', './file2.txt', './file3.txt'] } I am looking to use the require function in JavaScript t ...

javascriptjsonnode.js

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

javascriptjqueryhtmlcssmouseover

Instructions on updating the form action depending on different radio button sets

Allow users to select one radio button from each of the three groups. Based on the values chosen, dynamically change the destination page for the submit button. Below is the code snippet: input[type=radio] { position: relative; visibility: hidden; ...

javascripthtml

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...

javascripthtmlcssangularjserror-handling

The JSON file I am trying to load is encountering a parsing failure over HTTP

When trying to load valid json data, I encountered the following error message: Check it out on StackBlitz! Error: Http failure during parsing for ... .json https://i.sstatic.net/hG4uQ.jpg recipe.component.ts url = '../../files/recipes.json&ap ...

javascriptjsonangulartypescript

"Moisten" a JavaScript object instance using a JSON array, similar to the way PHP does

When populating PHP objects with data, I typically use the following method: public function hydrate(array $data){ foreach($data as $key=>$value){ $method = 'set'.ucfirst($key); if(METHOD_EXISTS($this,$method)){ ...

javascriptphparraysjsonobject

The functionality to generate personalized worldwide timezone pipe is not functioning

I'm completely new to Angular and I've been working on creating a custom pipe for adjusting timezones. The idea is to allow users to select their preferred timezone and have the offset applied accordingly. To start, I created a file called timez ...

angulartypescript

Issues with onfocus and onclick events not functioning as expected in HTML

I have encountered what appears to be a common yet perplexing issue. You can view a draft of the page here. The specific behavior I am aiming for is as follows: To execute a calculation, use <script type="text/javascript" src="amp.js"></script> ...

javascripthtmlcss

Dynamic Management of Watchers in Vue.js

I'm facing an issue with a component that has a table row containing multiple fields. When I update one field, it triggers changes in another field based on margin or sell price. However, monitoring all the fields results in a bouncing effect. Adding ...

javascriptvue.jsvuejs2vue-component

Issue with parent-child communication in React.js causing malfunction

I am facing an issue with maintaining state between two different JavaScript files using React. The parent class, break.js, is defined as follows: export default function AlertDialog(props) { const [demoOpen, setDemoOpen] = React.useState(true); ...

javascriptreactjsmaterial-ui

Angular2 - how can I effectively organize the logic between my components and services?

Within my current project setup, I have the following structure implemented: I have a Component that interacts with a Service Class which in turn calls an external API. The specific logic that I need to implement is related solely to the user interface. ...

angulartypescript

The simplest method to retrieve Json or a Collection using Meteor's Iron Router

Currently, I am in the process of creating a set of routes. Below are some examples: / - This route should render the home page template /items - This route should display the items page template /items/weeARXpqqTFQRg275 - This route is set to return an ...

javascriptmongodbmeteoriron-router

What is the process of converting a union type into a union of arrays in TypeScript?

I have a Foo type that consists of multiple types For example: type Foo = string | number I need to receive this type and convert it into an array of the individual types within the union type TransformedFoo = ToUnionOfArray<Foo> // => string[] ...

typescript

Error: Type error - unable to call function on string during Ajax request

An error message saying "Uncaught TypeError: string is not a function" keeps popping up when I attempt to make an Ajax call. Here's the code snippet: $('input.js-nome-produto-servico').live("keyup", function(ed, h){ var $campo = ed.cur ...

javascriptjqueryajaxruby-on-rails-3

Using Ajax and Jquery to send a variable to a PHP script

Having trouble accessing the variable from JQuery Ajax? I've tried everything, even added a cdn script tag to both files. However, I keep getting an error of undefined index. Notice: Undefined index: head in C:\xampp\htdocs\Project&bso ...

javascriptphpjqueryajax

A guide to making API calls in node.js with JSON data in the body

I am looking to send HTTP requests to an external API service. The web server I am trying to communicate with requires specific headers and a JSON payload in the request body. After researching, I found the request package which seems promising for this ...

javascriptjsonnode.jsexpressrequest

What is the most efficient method for arranging the numbers in a whole number?

Is there a more efficient method than storing the numbers in an array and using .sort() to arrange them? ...

javascript