0
以下是將用於創建折線圖的代碼。但是，我面臨的問題是，我的d3.tool提示行不能相應地工作。另外，我希望能夠縮短Y軸，以便線條看起來有更大的差距。爲什麼我的d3.tool提示不適用於兩條線？
<!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: black ;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
h3 {
margin-left:220px;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
</style>
<div>
<h3>Life Expectancy History</h3>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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 tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Male:</strong> <span style='color:white'>" + d.male + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankmale;
});
var tip1 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Female:</strong> <span style='color:white'>" + d.female + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankfemale;
});
var tip2 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Both Gender:</strong> <span style='color:white'>" + d.both + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.rankall;
});
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 y2= 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(10);
var line = d3.svg.line()
.x(function (d) { return x(d.year); })
.y(function (d) { return y(d.male); });
var line2 = d3.svg.line()
.x(function (d) { return x(d.year); })
.y(function (d) { return y(d.female); });
var line3 = d3.svg.line()
.x(function (d) { return x(d.year); })
.y(function (d) { return y(d.both); });
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).call(tip2);
d3.json("lifehistory.json", function (error, data) {
data.forEach(function (d)
{
d.year = parseDate(d.year.toString());
d.male = +d.male;
d.female = +d.female;
d.both = +d.both;
});
x.domain(d3.extent(data, function (d) { return d.year; }));
y.domain([0, d3.max(data, function (d) { return d.male; })]);
y1.domain([0, d3.max(data, function (d) { return d.female; })]);
y2.domain([0, d3.max(data, function (d) { return d.both; })]);
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("Life Expectancy History");
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.male)})
.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.female)})
.attr('r', 3)
.attr('fill', 'blue')
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide);
svg.selectAll('.yaxis3')
.data(data)
.enter()
.append('circle')
.attr('class', 'yaxis3')
.attr('cx', function(datum){return x(datum.year)})
.attr('cy', function(datum){return y2(datum.both)})
.attr('r', 3)
.attr('fill', 'blue')
.on('mouseover', tip2.show)
.on('mouseout', tip2.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));
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line3(data));
});
</script></div>
這是我創建的折線圖。 d3.tool提示並不像我想要的那樣工作，因爲只有一個d3.tool提示正在處理一行，而其他行則不會出現在其他行上。我想展示y軸在每個值之間有更大的差距，換句話說，這意味着線之間的差距會更大，以便人們可以輕鬆分析圖。有沒有辦法讓我這樣做？
這是我使用的JSON文件。
[{"year":"1960","male":"61.7","female":"65.7","both":"63.7","rankmale":"47","rankfemale":"50","rankall":"45"},
{"year":"1970","male":"65.4","female":"70.2","both":"67.7","rankmale":"45","rankfemale":"45","rankall":"44"},
{"year":"1980","male":"68.9","female":"74.2","both":"71.5","rankmale":"33","rankfemale":"36","rankall":"29"},
{"year":"1990","male":"71.9","female":"76.9","both":"74.3","rankmale":"28","rankfemale":"30","rankall":"30"},
{"year":"2000","male":"76.1","female":"80.1","both":"78.1","rankmale":"11","rankfemale":"24","rankall":"15"},
{"year":"2011","male":"80.1","female":"84.6","both":"82.3","rankmale":"6","rankfemale":"8","rankall":"5"}]
現場演示是否有可能爲它有一個像中的所有行作爲線路之間都相當接近對方更大的空間。 –
您可以操縱比例尺的域來做到這一點。在這種情況下，域名最多可以使用[60,85]。 –
關於D3尺度和顏色的一個很好的閱讀是http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/。 –