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
- How should I bind data to appended elements to a transformed D3.js group?
- D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
- d3js stacked bar chart with groups
- D3.js - how selections work - Need clarification on Mike's article
- R networkD3 custom node color for radialNetwork()
- Auto refresh text d3js
- Spacing Bars on Chart using JavaScript/D3
- Adapt observable to D3 but nothing rendering in the web page
- How do you push a new node onto an existing node in D3 in a tree layout?
- D3 transition not occurring on svgelement.enter()
- How to add a line graph to a scatterplot using d3?
- How do I add an "average" line to an nvd3.js Stacked Area Chart?
- How to select parent of directive with D3.select?
- D3.js advanced node connections (find the path)
- d3js - Create a server side SVG with javascript actions
- Displaying SVGs on HTML page
- NVD3 - configuring ticks on axis
- d3 bar chart - trying to line up tick to bar
- Grouping/clustering graph edges with same color in D3
- transitioning transform attribute of a group element not working in firefox
- Iterating over all tick marks except the last one
- D3.js: Circular clipping path isn't working?
- D3 - Position second x axis labels
- Mouse up event not working properly in SVG
- How to find the coordinates of a text in an svg?
- unable to select element : node cannot be found
- D3 append based on header name
- D3.js Display raster and vector
- c3.js: axis-y label overlapped
- D3 v4 change opacity for kontext related nodes