score:2
If a single datum attribute can be checked to see if the bound data has changed, one method would be to track that attribute as a property using selection.property
and a custom property such as type
. When appending the data you could define the property fairly easily:
.append("circle")
.property("type",function(d) { return d.type; });
Then, when updating, you could filter based on which data are matching or not matching the property:
circles.data(newdata)
.filter(function(d) {
return d.type != d3.select(this).property("type")
})
This filter will return those elements that have changed their type. Now we can re-assign the property to reflect the new type and transition those filtered elements.
The snippet below should demonstrate this, the datum is just a number one or two (represented by blue and orange), and is used to set the property type. Click on the svg to update the data, only those circles which change their datum will temporarily change their radius, while also changing their color to reflect their new datum.
var svg = d3.select("body")
.append("svg")
.attr("width",400)
.attr("height",400);
var circles = svg.selectAll("circle")
.data(data())
.enter("circle")
.append("circle")
.attr("cy",function(d,i) {
return Math.floor(i/5) * 40 + 20;
})
.attr("cx", function(d,i) {
return i%5 * 40 + 20
})
.attr("r", 8)
.attr("fill",function(d) { return (d) ? "steelblue" : "orange"})
.property("type",function(d) { return d; });
// update on click:
svg.on("click", function() {
circles.data(data())
.filter(function(d) {
return d != d3.select(this).property("type") // filter out unchanged data
})
.property("type",function(d) { return d; }) // update to reflect new data
.transition()
.attr("r", 20)
.attr("fill","crimson")
.duration(500)
.transition()
.attr("fill",function(d) { return (d) ? "steelblue" : "orange" })
.attr("r",8)
.duration(500);
})
function data() {
var output = [];
d3.range(20).map(function(d) {
output.push(Math.round(Math.random()));
})
return output;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
Source: stackoverflow.com
Related Query
- Updating only those SVG elements where the underlying bound data has been modified
- How to update elements of D3 force layout when the underlying data changes
- d3 + Backbone: updating elements for which data has changed
- Looping through data attributes to create 4 separate bar charts... why are there "phantom" data elements being bound to the xAxis?
- Why d3.domain() has only one element when I use the whole data array as domain?
- How to rearrange the DOM order of svg elements based on their data values in a dynamically changing d3 vis?
- D3 forceCollide not working properly after updating the underlying data
- How to keep circles inside the svg when updating data in bubble chart
- How do I make the height of a horizontal bar chart flexible in order to be resized when new data has been added in?
- sorting data bound to svg elements using d3.js
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- In d3, how to get the interpolated line data from a SVG line?
- nvd3.js : unable to bind onClick event with the data points in the svg
- maximum number of svg elements for the browser in a map
- How to update the fill color on existing svg elements with d3.js?
- D3 updating graph with new elements create edges with the wrong nodes
- How do I associate SVG elements generated by graphviz to elements in the DOT source code
- Updating the data of a pack layout from JSON call and redrawing
- How to update elements of an HTML that the elements are created using data from a CSV file?
- Join existing elements of the DOM to data with d3.js
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- d3.js realtime updating svg line with python websocket data
- D3 new data at .data() makes svg to redraw instead of updating nodes position
- Display only values from the data set into X axis ticks
- Updating child elements of data joins in d3.js
- How do I scroll d3 elements while keeping a portion of the svg in a fixed position?
- D3.js Moving elements in the svg structure
- Get attributes of existing SVG elements and bind as data with d3.js
- Render only SVG nodes of data that is currently visible?
- D3.js: "On the fly" added elements to array are not refreshing the svg graphic
More Query from same tag
- d3 data binding array of objects by id value to loaded svg
- Abnormal width when I have two graph D3.js on the same page
- How to increase size of pie segment on hover in d3
- Binding an event during an update() transition
- D3.js zoom functionality in node-map
- Fill last svg graphic drawn in pictogram by percentage of height (d3.js)
- d3 pie chart problems with exiting entering
- SVG path element created by d3 (d3.svg.arc) disappearing when mask is applied
- adding text to a circle in d3
- D3 Chaining Animations with a for loop
- Apply D3 tooltip to Donut Multiples
- D3 / Javascript
- D3 chart integration into Vuejs
- D3 Scatterplot with thousands of data points
- D3 tooltip not appearing near mouse
- D3js .tsv data not being loaded into variable & attributes
- Preserve a Transform in an SVG element
- How to zoom in on a polygon in D3.js
- What is difference between string[] & [string,string,string]
- Unable to sort the element in nested json
- d3js , enterprise counterpart - for .NET?
- D3 V4, How can I have a tick mark at every data point, but a label at only select data points
- d3.js 4.2 first element in selection not binding
- d3 svg circle placement on x, y
- d3 nesting on several keys with a loop
- D3js: drag slider working with touch
- d3 selectors: Works in code but not in console. Why?
- How do I make sure the zoom doesn't go below zero and avoid the zoomed points touching the y and z axis? d3.zoom v4
- dc.js : Barchart cant be display
- How can I bring a circle to the front with d3?