[Solved]-D3 Interactive Legend on Multi Line Chart Issue-d3.js

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!