Brush In Multiline Chart Is Working For Only One Line

am working on multi line chart with two lines and with brush and zoom in d3 v4, when i brush my only one line is moving my another line remains constant. Since i have just started

Solution 1:

In the brushed() and zoomed() functions, you are only updating the green line (extra VS. date). You have to identify each line (for example with a specific class), and update both using their respective d3.line functions:

Line_chart.append("path")
    .datum(data)
    .attr("class", "line line-extra") // <-- class added here
    .style("stroke", "green")
    .attr("d", line);

Line_chart.append("path")
    .datum(data)
    .attr("class", "line line-speed") // <-- and here
    .style("stroke", "blue")
    .attr("d", line1);

[...]

function updateLines() {
  Line_chart.select(".line-extra").attr("d", line);
  Line_chart.select(".line-speed").attr("d", line1);
}

function brushed() {
  [...]
  updateLines();
}

function zoomed() {
  [...]
  updateLines();
}