score:1
there are different ways to achieve this. since the first d in ddd (also known as d3) means data, the approach i like most is binding a datum to the clicked element, indicating that it was clicked:
d.clicked = true;
or, if you want to reverse the boolean after a second click:
d.clicked = !d.clicked;
then, in the mouseover
, just check that datum:
if (d.clicked) return;
here is a demo using green circles: if you mouse over them, they turn red. if you click them, they turn blue, and never turn red (or green) again.
var svg = d3.select("svg");
var circles = svg.selectall(null)
.data(d3.range(5).map(function(d) {
return {
x: d
}
}))
.enter()
.append("circle")
.attr("cursor", "pointer")
.attr("cy", 75)
.attr("cx", d => 30 + 50 * d.x)
.attr("r", 20)
.style("fill", "lime");
circles.on("mouseover", function(d) {
if (d.clicked) return;
d3.select(this).style("fill", "firebrick")
}).on("mouseout", function(d) {
if (d.clicked) return;
d3.select(this).style("fill", "lime")
}).on("click", function(d) {
d.clicked = !d.clicked;
d3.select(this).style("fill", "blue")
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
score:0
probably a few tactics, either
set path.style("pointer-events", "none")
for clicked paths, which will stop all future clicks/mouseover events.
or if that is too drastic, add a class to clicked paths path.classed("clicked", true)
, which you could use in a test during your mouseover event before applying any styling changes
Source: stackoverflow.com
Related Query
- Change style after a d3 path has been clicked
- D3.js change x-axis path line style
- Selecting path within G element and change style
- Assign element specific boolean values to determine if element has been previously clicked - current code blanket updates all elements
- How to format numbers in legend after it has been safely used to define the legend
- how to change style for a particular path in partition chart (D3.js)
- d3 zoom behaviour after target has been translated
- Run an java script after controller has been loaded in CodeIgniter
- How to append text dynamically after rect has been created
- Determining coordinates in lat/lng of a point in pixels on a map after zoom has been applied
- d3.js v4 d3.layout.tree has been removed?
- change the style with 'selectAll' and 'select' problems
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- In d3.js, how can I check if an element has been removed without doing a new selection?
- In d3 is it possible to dynamically change where a path position starts for tweening?
- How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?
- Back to path style color on click in d3.select(this)
- Change d3 force layout link style to match d3-tree look
- D3.js change width of container after it is drawn
- How can I change style class & content of text for ancestors in this d3.js tree?
- How do I change the color of path in D3.js?
- D3 Click event doesn't work after re-appending path
- d3 pie: redraw label on path change
- Adding a new path when the updated data has additional sections
- Data-Driven Documents (D3.js) change color when clicked
- Scale a path object after translating
- Applying stroke-dasharray style to only part of a path
- How do I change color of path element when its value is selected from dropdown
- how to change zoom.translateExtent after declaring zoom
More Query from same tag
- How to parse date on D3 with a specific interval
- How to wait on d3.json to finish?
- D3.js/Dc.js different colored line segments for single line in line graph
- Force Directed Graph with expand and collapse (d3.js)
- Using index of parent on child in D3
- Which workflow to get polygons from a geographic area and a raster file?
- Adding an auto brush to the d3 timeline chart
- Leaflet.js+d3.js circles with transition
- Apply D3 tooltip to Donut Multiples
- AngularJS $watch only firing on intitialize
- D3 - Selection in differents DIV
- how do I labels to the axis in this d3 example
- How to linebreak an svg text in javascript?
- Trouble with selection.datum()
- D3 graph not loading.. Showing blank page D3.Js and python
- Multiple instances of d3 force layout on the same page
- Word cloud popup video
- How to store zoom state and update incrementally in d3?
- How to center a List inside a D3 circle
- Time range selector with resize handles in Vega
- d3 xScale is writing out NaN for values in line chart
- Address JS ES6 Map in arrow functions
- Position of node changes when they link (using d3.js)
- Change color on a map D3
- D3 scale.invert() isn't returning date for x
- Should I filtering my data for d3 in SQL or JS
- Getting the max values from JSON in D3
- Set D3 ticks dynamically based on data range
- What exactly is d3 selecting?
- Heavy calculations and displaying data without blocking UI