0
我創造了一個散點圖這需要JSON數據從 https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json ，任何東西都工作正常，但標籤不是爲所有人創造價值
標籤不產生對於所有價值在散點圖D3js
我的代碼如下像
var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
//Call CSV Data
d3.json(url, function (error, data) {
if (error) console.log("You Got Error Some Where !!!");
/*
Check For Data
console.log(data);
console.log(data[0].Name);
*/
var fastestTime = 2210;
data.forEach(function (finish) {
//turn finishing time into seconds behind winner
finish.behind = finish.Seconds - fastestTime;
});
//Create Margin
var margin = { top: 40, right: 20, bottom: 60, left: 60 },
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
/*
define scale then followed by axis
*/
// define x and y scales
// define x and y scales
// Formatters for counts and times (converting numbers to Dates).
var formatCount = d3.format(",.0f"),
formatTime = d3.time.format("%H:%M"),
formatMinutes = function (d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
var xScale = d3.scale.linear().
domain([d3.max(data, function (d) { return d.behind+50; }), 0 ]).
range([0, width]);
var yScale = d3.scale.linear().
domain([0, d3.max(data, function (d) { return d.Place + 1; })]).
range([0, height]);
// define x axis and y axis
var xAxis = d3.svg.axis().
scale(xScale).
orient("bottom").
tickFormat(formatMinutes);
var yAxis = d3.svg.axis().
scale(yScale).
ticks(8).
orient("left");
/*
Create Tooltip
*/
var toolTip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
var tooltipHTML = "<span class = 'name'>" + d.Name + "</span><br/>" + d.Year + "<br/>" + d.Nationality;
if (d.doping !== "") {
tooltipHTML += "<br/>" + d.Doping;
} else {
tooltipHTML += "<br/>No doping allegations";
}
return tooltipHTML;
});
/*
create svg element then append height and width and g which act as a container
*/
var svg = d3.select("body").
append("svg").
attr({
"width": width + margin.right + margin.left,
"height": height + margin.top + margin.bottom
}).
append("g").
attr("transform", "translate(" + margin.left + "," + margin.right + ")");
//call toolTip
svg.call(toolTip);
// Draw xAxis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis).append("text")
.attr("x", 300)
.attr("y", 35)
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text("Minutes Behind Fastest Time");;
//Draw yAxis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0)
.attr("y", -35)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text("Ranking");
/*
create bar or bind data
*/
//bind data
svg.selectAll("circle")
.data(data)
//enter data
.enter().
append("circle")
//update data
.attr("class", "circle")
.attr("cx", function (d) { return xScale(d.behind); })
.attr("cy", function (d) { return yScale(d.Place); })
.attr("r", 8)
.attr("fill", function (d) {
if (d.Doping == "") {
return "green";
}
return "red";
})
.on('mouseover', toolTip.show)
.on('mouseout', toolTip.hide);
// Creating labels
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function (d) {
return d.Name;
})
.attr("x", function (d) {
return xScale(d.behind - 5);
})
.attr("y", function (d) {
return yScale(d.Place - (-0.3));
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
});svg {
margin-top:50px;
margin-left: auto;
margin-right: auto;
display: block;
background-color:antiquewhite;
}
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
/*Do Not Change*/<!DOCTYPE html>
<html>
<head>
<title>ScatterPlot</title>
<meta charset="utf-8" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/d3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
<link href="demo.css" rel="stylesheet" />
</head>
<body>
<script src="../Scripts/jquery-2.2.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="demo.js"></script>
</body>
</html>