d3.js create same svg object with different data

Question

I have a script, that works fine and create a chord diagram I need. But now I want to create the same .svg file on another div but with different matrix. Should I duplicate the same script for a new svg, or I can do in more efficient way?

You can find my code here.

Now my .Js script use drawChordWithMatrix(matrix_T1_T2) to show chord on div with id chart What should I do to run drawChordWithMatrix(matrix_T2_T3) on id chart1

Hmm, it is tough with the code you have as is. Really you need to encapsulate the "setup", "drawing" and "appending" sections into functions - so that they can be called to work with a specific svg instance (rather than a single hard coded one)...maybe take a look at: bost.ocks.org/mike/chart to get a good overview of reusable components in d3. — Fraser
– Fraser, Commented Dec 6, 2017 at 5:06
@Fraser thanks for response. Well, I see your point. Actually incapsulating the logic is not a big deal. I can't understand how can I link div and svg. I don't think, that creating a div with another id and creating a new svg for this id is good approach. I think that my script should execute two function drawChordWithMatrix(matrix_T1_T2), drawChordWithMatrix(matrix_T2_T3). — Daniel Chepenko
– Daniel Chepenko, Commented Dec 6, 2017 at 5:43
well the accepted answer does exactly that - and it is the approach - you pass parameters to a reusable function that encapsulates the code you need to repeat... — Fraser
– Fraser, Commented Dec 6, 2017 at 13:34

Cyril Cherian · Accepted Answer · 2017-12-06 06:09:17Z

3

One way i can think is

1) Move the SVG creation into the drawChordWithMatrix

So you need to pass the id to which you need to attach the SVG. something like this function drawChordWithMatrix(matrix, id), and you create your SVG in the function like this.

var svg = d3.select(id).append("svg")//selecting on basis of ID.
            .attr("width", (width + margin.left + margin.right))
            .attr("height", (height + margin.top + margin.bottom));

2) Next move all functions like fade, fadeOnChord , etc.. into the drawChordWithMatrix so that they all have the same scope.

working code here

answered Dec 6, 2017 at 6:09

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

d3.js create same svg object with different data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related