Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update doesn't work properly #5

Closed
kafom opened this issue Aug 8, 2016 · 2 comments
Closed

Update doesn't work properly #5

kafom opened this issue Aug 8, 2016 · 2 comments

Comments

@kafom
Copy link

kafom commented Aug 8, 2016

Pasha,
Thanks for adding the update.
However it only works when the data changes but not the number of connections.

See the example below.
As shown when you run the program, the edges do not update correctly.

<style> .mainBars{ shape-rendering: auto; fill-opacity: 0; stroke-width: 0.5px; stroke: rgb(0, 0, 0); stroke-opacity: 0; } .subBars{ shape-rendering:crispEdges; } .edges{ stroke:none; fill-opacity:0.3; } </style> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="http://vizjs.org/viz.v1.1.1.min.js"></script> <script> var data={ 1:[['A','X', 1] ,['A','Y', 3] ,['B','X', 5] ,['B','Y', 8] ,['C','X', 2] ,['C','Y', 9] ], 2:[['A','X', 5] ,['A','Y', 3] ,['B','X', 10] ,['B','Y', 8] ,['C','X', 2] ,['C','Y', 1] ], 3:[['A','X', 10] ,['B','X', 15] ,['B','Y', 8] ,['C','X', 2] ,['C','Y', 9] ], 4:[['A','X', 1] ,['A','Y', 3] ,['B','X', 5] ,['B','Y', 4] ,['C','X', 2] ,['C','Y', 9] ,['D','X', 19] ,['D','Y', 4] ], 5:[['A','X', 10] ,['A','Y', 13] ,['B','X', 5] ,['B','Y', 18] ,['C','X', 21] ,['C','Y', 9] ] }; var width=960, height=700; var color = {A:"#3366CC", B:"#DC3912", C:"#FF9900"}; //create bp object var i = 1; var bp=viz.bP().data(data[i]).pad(2).fill(d=>color[d.primary]); // create svg and g elements and draw bp on it d3.select("body").append("svg").attr("width", width).attr("height", height) .append("g").attr("transform","translate(250,50)").call(bp); // refresh data every second setInterval(update,5000); function update(){ console.log(data[i]) i = i+1; // reate some random values // data.forEach(function(d){ d[2] =Math.random()*10 ;}); //set the new data and redraw if (i < 5) bp.update(data[i]); else i = 0; } // adjust the bl.ocks frame dimension. d3.select(self.frameElement).style("height", height+"px").style("width", width+"px"); </script>
@NPashaP
Copy link
Owner

NPashaP commented Aug 8, 2016

The update is designed for when the values change and not the groups.

I will look into adding exit and enter for new groups in the update. I am not sure what kind of transition they should have, I will have to figure those out.

@NPashaP NPashaP closed this as completed Mar 11, 2017
@nightire
Copy link

@NPashaP So any progress on groups exit and/or enter?

Is there an alternative way to update whole chart? I'm thinking maybe I can destroy it entirely then redrawing, but I can't find how to destroy it...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants