score:2
Accepted answer
If by "continuously" you mean that you want to run the transition infinitely, use on("end")
to call the transition function again.
Here is an example:
var toggle;
var data = [0, 1];
transition();
function transition() {
toggle ^= 1;
d3.select("circle")
.transition()
.duration(1000)
.style("opacity", data[toggle])
.on("end", transition);
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<circle cx="100" cy="100" r="50"></circle>
</svg>
score:0
I assume by continuously you mean smoothly transition rather than switch immediately from one opacity state to the next, as opposed to repeating the transition.
You first need to set an initial opacity on the circles when you create them:
.attr("opacity", 0)
And then use d3.selectAll
rather than d3.select
, or better your variable circles
...
circles
.data(osc)
.transition()
.delay(function(d,i){ return i*1000; })
.duration(1000)
.attr("opacity",function(d){ return d[0] });
Source: stackoverflow.com
Related Query
- D3JS oscillating bubbles
- Create rectangle instead of bubbles in d3js
- How to achieve that bubbles are only clickable if completly zoomed d3js
- How to display names next to bubbles in d3js motion chart
- D3js take data from an array instead of a file
- d3js Tree square
- Get one element from d3js selection, by index
- Create database E-R diagram with D3js
- Do AngularJS Directives for D3JS exist?
- D3js how to append 2 children at the same level in .enter context
- Extending d3js hierarchical tree for representing topology
- D3js within Java application
- d3js - d3.scale.category10() not working?
- d3js : How to select nth element of a group?
- Using d3js to make a candlestick or ohlc chart
- d3js tree.nodes() is not a function
- D3js v4: scaleOrdinal does not have the rangePoints()
- D3js - change Vertical bar chart to Horizontal bar chart
- flowcharts in d3js using dagre-d3 or colajs
- Iterate over already created nodes in D3js
- D3js : How to convert svg text to path?
- Adding and Removing Nodes in D3js Force Graph
- arrows on links in d3js force layout
- How to use D3js on server side to generate SVG directly?
- d3js scale, transform and translate
- d3js dragging circle should rearrange other circles in main boundary circle
- d3js - how to set albers projection properly?
- How to change line color in d3js according to axis value?
- D3js - Creating and easily updating a multi-line chart
- rect collision detection d3js
More Query from same tag
- How to add click event on d3.js child of collapsible tree?
- How to access key values in an object using d3.js?
- How to use d3 filter and update function to toggle between data selections
- Is it possible to draw these charts with nvd3 or similar?
- how to find position of circles between lines in d3 polar scatter chart
- d3js move a node without dragging
- Append defs tag and use it within SVG in D3.js
- For loop creating concentric donut charts
- D3.js click to function using .on() method
- How to spcify ticks on x axis for time scale in d3js?
- Create a network graph using d3.js
- D3.js highlight related nodes / links
- how to visualize transition in a loop
- flattened json file using javascript / coffee with d3.json
- What does d3.select(this) return?
- Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)
- D3.js v4 major & minor tick lines with y-Axis zero as the centered baseline
- D3 different behavior when using method chaining
- D3 Charts, How to iterate through Json data NOT from file?
- In Spotfire Mods is it possible to check what has updated or changed in the reader?
- Calculate averages to display in center of d3 donut chart
- dc.js add class to data points in multiple charts based on criteria from first chart
- Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript
- draw a straight line between 2 coordinates in d3
- cal-heatmap onclick on day, scroll to the week's section
- Applying JQuery Mobile's style to function
- how can i break text in 2 lines in d3.js
- dc.js bubble chart fails to display points
- Showing Multiline text using d3.js
- d3 - rendering an html table on top of an svg element