CODEWITHSUNDEEP
d3.js
javalearner
javalearner

Reputation: 367

two graph of d3 in same page are getting effected when events happening in other graph

in a html page we have two divs.

one div consist of tree layout and second div consist of other graph .both are written in d3.

d3.select("g").transition().duration(duration).attr("transform",
                        "translate(" + x + "," + y + ")scale(" + scale + ")");

the above statement d3.select('g') is causing issue,it is trying to select the other div as well and it is effecting it.

tried adding id to each container but didnt worked.

thanks in advance

Upvotes: 0

Views: 96

Answers (3)

Manjunath Raddi
Manjunath Raddi

Reputation: 421

Use something like this

 .......
 var g = d3.select(this)
 redraw(g);
 .....


 function redraw(g) {
    g.selectAll(".resize").attr("transform", function (d) {
            "translate(" + x + "," + y + ")scale(" + scale + ")");            

  });
}

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

There are a few things you can do to differentiate between elements.

  • Give IDs to the divs and use them in the selector. d3.select("#divone > svg > g")
  • Assign different classes to the g elements. d3.select("g.classone")
  • Keep references to the SVGs when creating them and select from those.

Here's some example code for this way:

var svg1 = d3.select("#divone").append("svg"),
    svg2 = d3.select("#divtwo").append("svg");
// more code
svg1.select("g");

Which way is the best depends entirely on your application, but in general the last solution is the safest one as you're keeping explicit references to your subselections.

Upvotes: 1

Saurabh Sinha
Saurabh Sinha

Reputation: 1800

Use something like this 

function animateFirstStep() {
                            d3.select(this).transition().delay(0).duration(
                                    100)

                            .attr("r", function(d) {
                                return d.r + 4;
                            });

or pass selector in place of this.

say the name if your function is generateChart(selector)

call the function like this generateChart("#NameofDiv")

it should work

Upvotes: 1

Related Questions