score:3

Accepted answer

first question, set a unique id to each "mouse-per-line" so you can toggle it's opacity:

var mouseperline = mouseg.selectall('.mouse-per-line')
  .data(datanest1)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line")
  .attr("id", function(d){
    return "mouse-per-line-" + d.key;
  });   

in your legend click handler:

d3.select("#mouse-per-line-" + d.key)
  .style("opacity", newopacity);

second question, instead of transform to move the rect, set the x and width attributes. you can make it dynamic by:

mouseg.append('svg:rect') // append a rect to catch mouse movements on canvas
  .attr('x', x(datanest1[0].values[0].x))
  .attr('width', x(datanest1[0].values[datanest1[0].values.length - 1].x) - x(datanest1[0].values[0].x)) 
  ...

updated code:

var data1 = [
	     {x: "name1", y: 2.5, label: "a"},
		 {x: "name2", y: 3.5, label: "a"},
	     {x: "name3", y: 4.7, label: "a"},
	     {x: "name1", y: 4.7, label: "b"},
		 {x: "name2", y: 3.5, label: "b"},
	     {x: "name3", y: 4.9, label: "b"},
	 ];	 
	var margin = {top: 20, right: 150, bottom: 60, left: 80},
		width = 1160 - margin.left - margin.right,
		height = 500 - margin.top - margin.bottom;	
	var x = d3.scale.ordinal().
		rangebands([0, width], 0.4, 0.8);
	var y = d3.scale.linear()
		.range([height, 0]);
	var xaxis = d3.svg.axis()
		.scale(x)
		.orient("bottom");
	var yaxis = d3.svg.axis()
		.scale(y)
		.orient("left");
	var line = d3.svg.line()
		.interpolate("basis")  
		.x(function(d) { return x(d.x); })
		.y(function(d) { return y(d.y); });
	var svg = d3.select("#linechart").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	x.domain(data1.map(function(d) { return d.x; }));
	y.domain([0, d3.max(data1, function(d) { return d.y; })]);	
	svg.append("g").
      attr("class", "x axis").
      attr("transform", "translate(-70," + height + ")").
      call(xaxis);
    svg.append("g").
      attr("class", "y axis").
      call(yaxis);
	  
	var datanest1 = d3.nest()
        .key(function(d) {return d.label;})
        .entries(data1);
		//console.log(datanest1)
	 var color = d3.
        scale.
        ordinal().
        range(['red', 'blue']).
        domain(d3.keys(data1[0]).
        filter(function(key) {return key === 'label';}));	
	 var legendspace = width/datanest1.length;	
		
	   datanest1.foreach(function(d,i) { 
	   
        svg.append("path")
            .attr("class", "line1")
            .style("stroke", function() {
                return d.color = color(d.key); })
            .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign id **
            .attr("d", line(d.values));
			
        svg.append("text")
            .attr("x", width - margin.left + 50)
            .attr("y", legendspace/4 + i*(legendspace/6))
            .attr("class", "linelegend1")
			.attr("id", 'taglegend'+d.key.replace(/\s+/g, '')) // assign id **
            .style("fill", function() {
                return d.color = color(d.key); })
            .on("click", function(){               
                console.log(d);
                // determine if current line is visible 
                var active   = d.active ? false : true,  
                newopacity = active ? 0 : 1;         
                // hide or show the elements based on the id
                d3.select("#tag"+d.key.replace(/\s+/g, ''))
				//.remove(); 
                    .transition().duration(500)         
                    .style("opacity", newopacity);
				//d3.selectall(".mouse-per-line circle")
				//	.style("opacity", newopacity);
				//d3.selectall(".mouse-per-line text")
				//	.style("opacity", newopacity);					
                // update whether or not the elements are active
                d.active = active; 
                d3.select("#mouse-per-line-" + d.key)
                  .style("opacity", newopacity);
          
                })
            .text(d.key); 
	
		 });	    	
	var mouseg = svg.append("g")
       .attr("class", "mouse-over-effects");

    mouseg.append("path") // this is the black vertical line to follow mouse
      .attr("class", "mouse-line")
      .style("stroke", "black")
      .style("stroke-width", "1px")
      .style("opacity", "0");
	  
	var lines = document.getelementsbyclassname('line1');

    var mouseperline = mouseg.selectall('.mouse-per-line')
      .data(datanest1)
      .enter()
      .append("g")
      .attr("class", "mouse-per-line")
      .attr("id", function(d){
        return "mouse-per-line-" + d.key;
      });	
	
    mouseperline.append("circle")
      .attr("r", 7)
      .style("stroke", function(d) {
        return color(d.key);
      })
      .style("fill", "none")
      .style("stroke-width", "1px")
      .style("opacity", "0");	
	
	mouseperline.append("text")
      .attr("transform", "translate(10,3)");
	  
    mouseg.append('svg:rect') // append a rect to catch mouse movements on canvas
	  .attr('x', x(datanest1[0].values[0].x))
      .attr('width', x(datanest1[0].values[datanest1[0].values.length - 1].x) - x(datanest1[0].values[0].x)) 
      .attr('height', height)
      .attr('fill', 'grey')
	  .style('opacity', '0.4')
      .attr('pointer-events', 'all')
      .on('mouseout', function() { // on mouse out hide line, circles and text
        d3.select(".mouse-line")
          .style("opacity", "0");
        d3.selectall(".mouse-per-line circle")
          .style("opacity", "0");
        d3.selectall(".mouse-per-line text")
          .style("opacity", "0");
      })
      .on('mouseover', function() { // on mouse in show line, circles and text
        d3.select(".mouse-line")
          .style("opacity", "1");
        d3.selectall(".mouse-per-line circle")
          .style("opacity", "1");
        d3.selectall(".mouse-per-line text")
          .style("opacity", "1");
      })	
      .on('mousemove', function() { // mouse moving over canvas
        var mouse = d3.mouse(this);
        d3.select(".mouse-line")
          .attr("d", function() {
            var d = "m" + mouse[0] + "," + height;
            d += " " + mouse[0] + "," + 0;
            return d;
          });
        d3.selectall(".mouse-per-line")
          .attr("transform", function(d, i) {
            //console.log(width/mouse[0])
            var xquater = y.invert(d3.mouse(this)[0]),
                bisect = d3.bisector(function(d) { return d.x; }).right;
                idx = bisect(d.values, xquater);
            
            var beginning = 0,
                end = lines[i].gettotallength(),
                target = null;

            while (true){
              target = math.floor((beginning + end) / 2);
              pos = lines[i].getpointatlength(target);
              if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                  break;
              }
              if (pos.x > mouse[0])      end = target;
              else if (pos.x < mouse[0]) beginning = target;
              else break; //position found
            }
            
            d3.select(this).select('text')
              .text(y.invert(pos.y).tofixed(2));
              
            return "translate(" + mouse[0] + "," + pos.y +")";
          });
      });
<!doctype html>
<html>
  <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <meta charset='utf-8'>
    <title>charts</title>  
    </head>
  <body>
    <div align="center" id="linechart">
    </div>  
  <style>
  .axis {
  	font-family: helvetica;
	font-size: 1em;
	font-weight: bold;
	color: #444444;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispedges;
}

.line2{
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}
.line1{
  fill: none;
  stroke: blue;
  stroke-width: 1.5px;
} 
  </style>
  </body>
</html>


Related Query