CODEWITHSUNDEEP
javascriptd3.js
user3002180
user3002180

Reputation: 431

mouseover on line doesn't give circle in d3 js

I try to get circle when mouses over on line like this. I used d3 js not nvd3. my code is

<!DOCTYPE html>
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

div.circle{
  border-radius: 50%;        
  width: 30px;                  
  height: 30px;                 
}
</style>
<html>
<head>
  <script type="text/javascript" src="d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">

data = [

  {date: 1,temp:10},{date: 2,temp:40},{date: 3,temp:90},
  {date: 4,temp:30},{date: 5,temp:20},{date: 6,temp:10}
];

  var margin = {top: 20,left: 30, bottom: 30,right: 40},
      height = 500 - margin.top - margin.bottom,
      width = 900 - margin.left - margin.right;

  var x = d3.time.scale()
            .range([0,width]);

  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 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 line = d3.svg.line()
                .x(function(d){return x(d.date);})
                .y(function(d){return y(d.temp);})
                .interpolate("linear");

    var mycir = d3.select("body").append("div")
                                  .attr("class","circle");

    x.domain(d3.extent(data,function(d){return d.date}));
    y.domain([d3.min(data,function(d){return d.temp}),d3.max(data,function(d){return d.temp})]);

    chart.append("g")
          .attr("class","x axis")
          .attr("transform","translate(0,"+height+")")
          .call(xAxis);
    chart.append("g")
          .attr("class","y axis")
          .call(yAxis);
    chart.append("path")
          .attr("class", "line")
          .attr("d",line(data))
          .attr("stroke","red")
          .attr("stroke-width",2)
          .attr("fill","none")
    chart.select(".line")
          .data(data)
          .on("mouseover",function(d){
                mycir.transition()
                      .duration(200)
                      .style("fill-opacity",.9);
                mycir .attr("cx",(d3.event.pageX))
                      .attr("cy",(d3.event.pageY-28))
                      .attr("r",5)
                      .style("fill","green")

          })
          .on("mouseout",function(d){
                mycir.transition()
                      .duration(200)
                      .style("fill-opacity",0)
          })

</script>
</body>
</html>

When I try to mouses over on line I don't see circle but I can see cx and cy of circle is changing in element inspect.

Upvotes: 0

Views: 674

Answers (1)

iMom0
iMom0

Reputation: 12931

You should append a svg:circle to svg like this:

var mycir = chart.append("svg:circle").attr("class","circle").attr('fill', 'red').attr('r', 5);

Upvotes: 1

Related Questions