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
- D3 Dynamically Changing Tick Format
- Why do my svg nodes leak memory in IE
- Create contour map
- d3.js smooth unrolling path transition
- TopoJSON with strange paths
- D3: can't set proper columns in .datum()
- D3js text not reading from database data
- d3.js force layout namespace in a backbone view
- D3 transition end events not firing correctly?
- transitioning transform attribute of a group element not working in firefox
- With D3.js is it better to re-draw or "move" objects?
- Simple path transition
- Mouseenter event only firing once for d3.js svg circle
- Reset Interval breaks my continuos flow of the graph
- D3 line .defined() with different array
- D3 select specific node by data
- GeoJson Map in Angular2
- How to render multi line chart with DC.js with the following type of data - JAVASCRIPT (DC.js)
- Random Translation in D3.js
- Executing an animation with for loop in callback function
- d3 select specific lines of csv file
- How to load csv file to use with D3
- is it possible to pass custom parametrs to tween?
- How to get Component reference(this) in D3 Context Menu OnOpen and OnClose
- Font style of text in svg not propagating to png on download
- Can d3's key function handle a list element?
- Adding element to array in d3
- Simple D3.js line chart with data that are values collect every hours
- D3 Line-Path Intersection
- Finding threshold intersection in a D3 chart