mouseover在线不在d3 js中给圆 [英] mouseover on line doesn't give circle in d3 js
问题描述
当鼠标悬停在线上时，我尝试获取圈子，如此。我使用d3 js不nvd3。我的代码是
<！DOCTYPE html>
< style>
body {
font：10px sans-serif;
}
.axis路径，
.axis行{
fill：none;
stroke：＃000;
shape-rendering：crispEdges;
}
div.circle {
border-radius：50％;
width：30px;
height：30px;
}
< / style>
< html>
< head>
< script type =text / javascriptsrc =d3.v3.min.js>< / script>
< / head>
< body>
< script type =text / javascript>
data = [
{date：1，temp：10}，{date：2，temp：40}，{date：3，temp：90} b $ b {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 ）{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 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 ）
.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 ，function（d）{
mycir.transition（）
.duration（200）
.style（fill-opacity，0）
}）
b $ b< / script>
< / body>
< / html>
当我尝试鼠标在线上时没有看到圆，但我可以看到 cx 和 cy 在元素检查中正在更改。
您应该以<$ p I try to get circle when mouses over on line like this. I used d3 js not nvd3. my code is When I try to mouses over on line I don't see circle but I can see You should append a
这篇关于mouseover在线不在d3 js中给圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<$ p $的形式在 var mycir = chart.append（svg：circle）attr（class，circle）。attr（'fill'，'red'）。attr（'r' 5）;
<!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>
cx and cy of circle is changing in element inspect.svg:circle to svg like this:var mycir = chart.append("svg:circle").attr("class","circle").attr('fill', 'red').attr('r', 5);
