score:1
It's sort of hard to know what you're asking from the way you phrased your question. If you're trying to display hovered appearance for all of the lines when one is moused over, you can define mouseover and mouseout functions that point to the set of path elements in the SVG.
Here is one way to do that:
path.on("mouseover", function(d){
d3.selectAll("path")
.transition()
.style("stroke-width", "5px");
})
.on("mouseout", function(d){
d3.selectAll("path")
.transition()
.style("stroke-width", "1.5px");
});
Check it out here: http://plnkr.co/edit/IOLu2xOn7TE7ObFi7tqm?p=preview
If you're asking something else you may want to edit your question.
score:0
First, I would modify your css so that the presence of a class will trigger the desired appearance as well.
.line:hover, .line.hovered {
stroke-width: 5px;
}
Then I would introduce javascript to add or remove that class, triggered on mouseover and mouseout events.
var updateLineHover = function() {
if ($('.line:hover').length) {
$('.line').addClass('hovered');
} else {
$('.line').removeClass('hovered');
}
};
$('.line').on('mouseover', updateLineHover);
$('.line').on('mouseout', updateLineHover);
Source: stackoverflow.com
Related Query
- hovering does not work with all elements of the same class in d3.js
- d3.on("mouseover") event does not work with nested SVG elements
- Transition all div elements with .tween at the same time with d3
- How to update all existing elements in the same level with same parent value?
- .on("drag", function()) and .on("contextmenu", function()) does not work when used on the same code
- I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error
- How can I toggle the class of all elements in a selection?
- d3 multiline update path and transition path does not work with nested data
- Why does this syntax work over the other one with d3.json requests?
- bisectLeft function does not work if the second parameter is numerical
- d3.v3 scatterplot with all circles the same radius
- The mouseover event for D3.js does not work in Leaflet
- Data Join with Custom Key does not work as expected
- Why does this code work for counting one item in a list but not the others?
- Does the main D3 module namespace not get updated with bleeding edge submodule additions?
- d3 js transition over the array of rectangles does not work
- D3 Object Constancy not working with key function. Enter and Update contain all elements every time
- Display all the leafs on the same level with D3.JS
- d3.js node translation does not work when changed the node to image
- d3.create() returns an element with .node(), but does not display in the browser
- How to select all elements with a class that contains a str?
- Updating the table multiple times using D3 does not work
- Grouping two g with the same class in D3
- order a capped chart with fake group does not work in dc.js
- D3 - not all children nodes are shown at the same time
- Drawing a line using d3 is not visible when all data items are the same
- d3.js: How to deal with svg elements that are being appended on the same position, one on top of the other?
- d3.js - Force simulation drag does not move with the mouse
- Why the maximum variable take the d3.max() value but the minimum one d3.min() does not work properly?
- D3 - why is this sort function not updating all the elements in its selection?
More Query from same tag
- Why would .duration act as .delay after appending an element in d3?
- Apply Filter function to select multiple rows of a CSV in D3.js
- d3 concise axis update method
- how to dynamically place lat, lon data onto a topoJSON map
- Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider
- dimple.js or d3.js - Draw chart's legend at bottom of svg element
- d3 How to rotate the slider?
- DC.JS create series plot using multiple columns
- D3.js child map failure ? Any gurus spot my error?
- Smooth SVG Axis Animation
- Problems animating ng-repeat directive template with d3
- d3.js horizontal stacked bar chart with 2 vertical axes and tooltips
- D3 pie chart zero data point changes arc fill color
- Change single chord color in chord diagram using D3.js
- How to underline text within a node's label in d3 force based layouts?
- Loop D3 animation of polygon vertex
- Exit selection not working
- .data() is not a function
- Why does the NVD3 StreamGraph shift the y zero axis over time?
- calling callback function before rest of code (Javascript D3)
- D3Js v3: Path not showing up on Node Elements
- Trouble connecting to json objects, setting up tick function in d3 force directed layout
- D3, SVG, and Javascript : Need to assign unique images to dynamically created nodes
- How can I bind d3 map tooltips to Leaflet's popupPane?
- Is it possible visualize large graph in D3?
- Creating bidirectional graphs in D3.js
- Merge multiple Angular scope watch statements
- darken rect/circle on mouseover in d3
- d3js v5 Resize Grouped Bar Chart
- Cannot hide labels 'behind' spinning D3 Globe