score:1

Accepted answer

You'll want to use d3.select(this)to get the context of whatever you're mousing over.

 .style("opacity", "0.5")
 .on("mouseover", function(d){d3.select(this).style("opacity", "1")  });

        //based on candlestick6panzoooom.html
       
          var candleWidth = 20;
          var candleGap = 40;
          var candleMargin = 10;
          var wickThickness = "2";
          var hLineColor = "#b5b6b7";
    
          var margin = {top: 20, right: 20, bottom: 20, left: 60},
          width = 940 - margin.left - margin.right,
          height = 640 - margin.top - margin.bottom;
var rand = [];

    var data = [{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 13.99,
                Low: 0.007,
                Open: 0.75,
                Close: 12.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            },{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 13.99,
                Low: 0.007,
                Open: 0.75,
                Close: 12.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            },{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 13.99,
                Low: 0.007,
                Open: 0.75,
                Close: 12.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            },{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 13.99,
                Low: 0.007,
                Open: 0.75,
                Close: 12.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            },{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			},{
                Date: 01 / 12 / 15,
                High: 3.99,
                Low: 0.007,
                Open: 0.75,
                Close: 2.04
            }, {
                Date: 02 / 12 / 15,
                High: 4.976,
                Low: 0.001,
                Open: 2.514,
                Close: 2.88
			},{
                Date: 01 / 12 / 15,
                High: 2.99,
                Low: 0.0007,
                Open: 1.75,
                Close: 1.04
            }, {
                Date: 02 / 12 / 15,
                High: 5.976,
                Low: 0.001,
                Open: 1.514,
                Close: 3.88
			}
	];

    var maxi = d3.max(data, function(d) {
      return d.value;
    }); 

    var maxLow = d3.min(data.map(function(x) {
        return x["Low"];
      }))
    var maxHigh = d3.max(data.map(function(x) {
        return x["High"];
      })) 
    var maxMinDiff = (maxHigh - maxLow) * 0.1;

    function min(a, b) {
      return a < b ? a : b;
    };

    function max(a, b) {
      return a > b ? a : b;
    };

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height);

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5)
      .tickSize(-width);

    var x = d3.scale.linear().domain([-width / 2, width / 2]).range([0, width]);

    var y = d3.scale.linear()
      .domain([maxLow - maxMinDiff, maxHigh + maxMinDiff]) //changed to reflect new variables for lowest, highest and difference to define input domain
      .range([height, 0]); //range has still not been modified ... remember x,y have been reversed to reflect y,x


    var zoom = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([1, 32])
      .on("zoom", zoomed);
      
    var chart = d3.select("body").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 + ")");
      
    var grid = chart.append("g")
      .attr("class", "gridding");

    var lines = grid.selectAll("line.y")
      .data(y.ticks(20))
      .enter()
      .append("svg:line")
      .attr("class", "y")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", y)
      .attr("y2", y)
      .attr("stroke", hLineColor);

    var numbers = grid.selectAll("text.yrule")
      .data(y.ticks(10))
      .enter()
      .append("svg:text")
      .attr("class", "yrule")
      .attr("x", 0)
      .attr("y", y)
      .attr("dy", 0)
      .attr("dx", 20)
      .style("fill", "#b5b6b7")
      .attr("text-anchor", "middle")

//    chart.append("clipPath")
//      .attr("id", "clip")
//      .append("rect")
//      .attr("width", width)
//      .attr("height", height);
//      
//    chart.append("rect")
//      .attr("class", "pane")
//      .attr("width", width)
//      .attr("height", height)
//      .call(zoom)
//      .style("fill","none")
//      .style("pointer-events", "all");

    var candlestick = chart.append("g")
      .attr("clip-path", "url(#clip)")
      .append("g")
      .attr("class", "candlesticks")

  
    function buildChart(data) {
      
     
      var wicks = candlestick.selectAll("wick")
        .data(data)
        .enter()
        .append("line")
        .attr("x1", function(d, i) {
          return candleMargin + candleWidth / 2 + (candleGap * i);
        })
        .attr("x2", function(d, i) {
          return candleMargin + candleWidth / 2 + (candleGap * i);
        })
        .attr("y1", function(d) {
          return y(max(d.High, d.Low));
        }) 
        .attr("y2", function(d) {
          return y(min(d.High, d.Low));
        })
        .attr("stroke", function(d) {
          return d.Open > d.Close ? "#a01f1b" : "#1ba048";
        })
        .attr("stroke-width", wickThickness);

    
      var candle = candlestick.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
          return candleMargin + (candleGap * i);
        })
        .attr("y", function(d) {
          return y(max(d.Open, d.Close));
        })
        .attr("height", function(d) {
          return y(min(d.Open, d.Close)) - y(max(d.Open, d.Close));
        })
        .attr("width", function(d) {
          return candleWidth
        })
        .attr("fill", function(d) {
          return d.Open > d.Close ? "#a01f1b" : "#1ba048";
        })
        .style("opacity", "0.5")
		.on("mouseover", function(d){d3.select(this).style("opacity", "1")  });

    } 
    buildChart(data);

		var movingAvg = function (data, neighbors)
 			  {
	 			console.log("neighbours is: "+neighbors)
  				return data.map( function(val, idx, arr)
				{
     			let start = Math.max(0, idx - neighbors)
	 			let end = idx + neighbors
     			let subset = arr.slice(start, end + 1)
     			let sum = subset.reduce((a,b) => a + b)
				console.log(sum)
     			return sum / subset.length
  				})
			  }	
		
			  var band = []
//			  for(var j = 0; j < 100; j++)
//				  {
//					  band.push(250*(Math.random()))
//				  }
//			  for(var i = 0; i < data.length; i++)
//			  {
//				band.push(data[i].Close)
//				console.log(band[i])
//			  }
				var dataAvg = movingAvg(band, 0)	

				var avgX = d3.scale
				.linear()
				.domain([0, data.length])
				//.range([0, width])
				.range([0, (candleMargin + (candleGap * data.length))])
    
				var avgY = d3.scale
					.linear()
					.domain([0, height])
					.rangeRound([height/2,height])

				var avg = candlestick.append("g").attr("class", "average")

				var curvedLine = 
					
					d3.svg.line()
					.x((d,i) => avgX(i))
					.y(d => avgY(d))
					.interpolate("basis")
						
						avg.append('path')
						.attr('class', 'avg')
						.datum(dataAvg)
						.attr('d', curvedLine)
				     	.attr("fill", "none")
						.attr("stroke", "red")
						.attr("stroke-width", 1)

			
		
		
		
		

    function zoomed() {
      candlestick.attr("transform", "translate(" + d3.event.translate[0] + ")")
    }
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>


Related Query

More Query from same tag