score:1
Accepted answer
Take a look at this: https://jsfiddle.net/mkwne5uh/
For 2) A simple solution would be to keep track of the hidden and apply mouseover and mouseout conditionally.
// define an array to hold the hidden info
var hidden = [];
...
...
// Loop through each symbol / key
nest.forEach(function(d,i) {
// Add the Legend
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace) // space legend
.attr("y", height + (margin.bottom/2)+ 5)
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return d.z = z(d.key); })
.on("click", function(){
// Update whether or not the elements are active
// initial d.active will be undefined, so on first click
// d.active will become false like this
d.active = !d.active;
// Determine if current line is visible
newOpacity = d.active ? 0 : 1;
// if category is not active now, remove it
if(!d.active){
hidden.splice(hidden.indexOf(d.key), 1);
}
else{// keep it for use later on
hidden.push(d.key)
}
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
})
.text(d.key);
});
and then:
function mouseover(d) {
if( hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return;
....
function mouseout(d) {
if( hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return;
As for 1) you could use .text(d.key.split(" ")[0])
but I am not so sure it would be the best solution.
Hope this helps, good luck!
Source: stackoverflow.com
Related Query
- D3 Interactive Legend on Multi Line Chart Issue
- Legend in Multi line chart - d3
- SVG Legend for multi line chart d3 v6
- D3 v4 Multi line chart Brush Issue NaN when moving brush
- Using D3, I am trying to add and remove lines from a multi line chart when the legend is clicked
- d3.js - Multi series line chart tool tip issue
- D3 Multi Series Line Chart with Clickable Legend
- Issue with d3 Multi Line Chart
- D3 line chart axis text labels in multi line
- dc.js Series Chart multi line
- D3.js line chart grid issue
- Error in A Simple D3 Line chart with Legend and Tooltips for D3v 3.5.13
- NVD3 line chart - legend text cut off
- Multi Line Ordinal d3 chart
- d3.js multiseries line chart tooltip issue
- d3 tooltip position issue in line chart using javascript
- d3.v4.js Line Graph Interactive Legend - Only works for first line
- d3: tooltips on multi series line chart at each line when mouse hover event
- D3 multi line chart - strange animation
- D3.js line chart tooltip issue
- simple multi line chart with D3
- d3.js multi y-axis line chart
- D3 - Single and Multi Line chart tooltips
- Having issue to display line chart using d3.js in .NET MVC C# project
- issue in re-rendering the path in a line chart based on user selection
- Multi line chart using d3 and json in a nvd3 structure
- How to toggle lines in a line chart using a legend
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- Error displaying dots on a multi series line - dots chart
- legend placement issue in D3 Bar chart
More Query from same tag
- Understanding a multi-line d3 chart example
- Inserting a line break in text element in d3
- D3.js Moving elements in the svg structure
- Is there any way to export d3 output to visio file?
- Voronoi cells are off-scale in a force-directed layout
- d3.js wrong time scale ticks
- Position of button in svg
- Filter selection by array without losing order d3js
- programmatically trigger click event in svg rect element
- How to create curved lines connecting nodes in D3
- Child div having position:relative causing problems
- Legend is not appending
- Still confused by d3's enter method
- d3.js selectable tree diagram
- Parse csv as object with extra property
- d3 remove nodes connected to clicked node
- How to change line interpolation dynamically
- D3 - Having trouble updating stacked bar chart
- D3 Multicolumn Relative Stack Chart
- Declaring CSS style inside Javascript for D3 graph
- dc-js disable selecting slices on click for pie chart
- Updating a stacked bar chart in d3.js (includes JSFiddle)
- D3 image transition of height only
- Fill rect with pattern
- patternTransform in svg not working for entire pattern
- Unit Testing transitions in D3 version 4
- Multiple mouseover events with d3.tip
- How can I specify a custom XML/SVG namespace with D3.js?
- Can anyone tell me why my d3 bar chart isn't showing up?
- D3V4 - can't get d3.tree to work in CodeSnippet