d3中的带状放大以获取HTML中的两个图形

Question

I am not so familiar with d3 libraries. I am trying to use http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab in addition to draw a graph that the information is taken from a tsv file and be able to zoom in and out. This is works good for me. The problem is that i am trying to have two different graphs in tehe same html. I can draw them in different axis, also can do zoom in and out for each graph, but the red square, the band that sign the area that i want to maximize, is shown only in the first graph. For example, if i have graph A and graph B, when i sign the area to do zoom in in graph B, i see the band in graph A but zoom is on graph B. Does anybody know what is the variable that defines this? How can i separate it so for each graph i will have its own band?

Answer 1

Just define another band with variable name as "band2", such as,

var band2 = svg.append("rect")
    .attr("width", 0)
    .attr("height", 0)
    .attr("x", 0)
    .attr("y", 0)
    .attr("class", "band");

Then use "band2" for graph B. Now, I hope, the zooming will work separately.