如何在我拥有的每个 y 轴值上添加气泡以及如何为每个值添加鼠标悬停功能？
Posted
技术标签:
【中文标题】如何在我拥有的每个 y 轴值上添加气泡以及如何为每个值添加鼠标悬停功能？【英文标题】：How do I add bubbles on each of the y-axis values that I have and how do I add mouseover function for each of them? 【发布时间】：2014-09-12 21:12:25 【问题描述】：<!DOCTYPE html>
<meta charset="utf-8">
<style>
body
font: 10px sans-serif;
.axis path,
.axis line
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.x.axis path
display: none ;
.line
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
#legend
margin-left:220px;
</style>
<div id="legend">
<h3>Cholera No Of Deaths & Cases</h3>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="legend.js"></script>
<script>
var margin = top: 30, right: 40, bottom: 30, left: 50 ,
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var y1= d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").ticks(5);
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("right").ticks(5);
var line = d3.svg.line()
.x(function (d) return x(d.year); )
.y(function (d) return y(d.value); );
var line2 = d3.svg.line()
.x(function (d) return x(d.year); )
.y(function (d) return y1(d.value2); );
var svg = 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 + ")");
d3.json("country.json", function (error, data)
data.forEach(function (d)
d.year = parseDate(d.year.toString());
d.value = +d.value;
d.value2 = +d.value2;
);
x.domain(d3.extent(data, function (d) return d.year; ));
y.domain([0, d3.max(data, function (d) return d.value; )]);
y1.domain([0, d3.max(data, function (d) return d.value2; )]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("x", 265)
.attr("y", 240)
.style("text-anchor", "middle")
.text("Years");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number Of Cholera Cases");
svg.append("g")
.attr("class", "y axis")
.call(yAxis1)
.attr('transform', 'translate(' + width + ',0)');
svg.append("path")
.datum(data)
.attr("class", "line")
.style("stroke", "red")
.attr("d", line(data));
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2(data));
legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(50,30)")
.style("font-size", "12px")
.call(d3.legend);
setTimeout(function ()
legend
.style("font-size", "20px")
.attr("data-style-padding", 10)
.call(d3.legend)
, 1000)
);
</script></div>
下面是我使用上面的代码创建的图表，但我想为每个 y 轴值添加一个气泡，并有一个鼠标悬停功能来显示 y 轴的确切值。那么，我需要如何更改我的代码，以便在每个 y 轴值和鼠标悬停函数上都有一个气泡？最后，我需要如何更改我的代码，以便有一个选项，我可以使用单选按钮更改 y 轴，一次只显示一个值。下面的示例显示了我试图用于我的代码的内容。 http://nvd3.org/examples/linePlusBar.html
["country":"Singapore","year": "1993", "value":"37046", "value2": "931",
"country":"Singapore","year": "1994", "value":"38735", "value2": "118",
"country":"Singapore","year": "1995", "value":"19903", "value2": "624",
"country":"Singapore","year": "1997", "value":"4170", "value2": "125",
"country":"Singapore","year": "1998", "value":"10000", "value2": "0"]
以上是我正在使用的 JSON 文件。
【问题讨论】：
【参考方案1】：这是一个使用 d3.caged 定义的鼠标悬停函数的示例。查看添加的依赖项，您会发现解决方案与此示例非常相似：
http://bl.ocks.org/Caged/6476579
这是您的解决方案： http://jsfiddle.net/blakedietz/H5HB9/3/
var margin = top: 30, right: 40, bottom: 30, left: 50 ,
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d)
return "<strong>Blah:</strong> <span style='color:red'>" + d.value + "</span>";
);
var tip1 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d)
return "<strong>Blah:</strong> <span style='color:red'>" + d.value2 + "</span>";
);
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var y1= d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").ticks(5);
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("right").ticks(5);
var line = d3.svg.line()
.x(function (d) return x(d.year); )
.y(function (d) return y(d.value); );
var line2 = d3.svg.line()
.x(function (d) return x(d.year); )
.y(function (d) return y1(d.value2); );
var svg = 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 + ")");
svg.call(tip).call(tip1);
var data = ["country":"Singapore","year": "1960", "value":"887", "value2": "199",
"country":"Singapore","year": "1965", "value":"218", "value2": "55",
"country":"Singapore","year": "1993", "value":"37046", "value2": "931",
"country":"Singapore","year": "1994", "value":"38735", "value2": "118",
"country":"Singapore","year": "1995", "value":"19903", "value2": "624",
"country":"Singapore","year": "1997", "value":"4170", "value2": "125",
"country":"Singapore","year": "1998", "value":"10000", "value2": "0"];
data.forEach(function (d)
d.year = parseDate(d.year.toString());
d.value = +d.value;
d.value2 = +d.value2;
);
x.domain(d3.extent(data, function (d) return d.year; ));
y.domain([0, d3.max(data, function (d) return d.value; )]);
y1.domain([0, d3.max(data, function (d) return d.value2; )]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("x", 265)
.attr("y", 240)
.style("text-anchor", "middle")
.text("Years");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number Of Cholera Cases");
svg.append("g")
.attr("class", "y axis")
.call(yAxis1)
.attr('transform', 'translate(' + width + ',0)');
svg.selectAll('.yaxis1')
.data(data)
.enter()
.append('circle')
.attr('class', 'yaxis1')
.attr('cx', function(datum)return x(datum.year))
.attr('cy', function(datum)return y(datum.value))
.attr('r', 3)
.attr('fill', 'red')
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
svg.selectAll('.yaxis2')
.data(data)
.enter()
.append('circle')
.attr('class', 'yaxis2')
.attr('cx', function(datum)return x(datum.year))
.attr('cy', function(datum)return y1(datum.value2))
.attr('r', 3)
.attr('fill', 'blue')
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide);
svg.append("path")
.datum(data)
.attr("class", "line")
.style("stroke", "red")
.attr("d", line(data));
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2(data));
legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(50,30)")
.style("font-size", "12px")
.call(d3.legend);
setTimeout(function ()
legend
.style("font-size", "20px")
.attr("data-style-padding", 10)
.call(d3.legend)
, 1000)
【讨论】：
以上是关于如何在我拥有的每个 y 轴值上添加气泡以及如何为每个值添加鼠标悬停功能？的主要内容，如果未能解决你的问题，请参考以下文章