1
我想添加具有Y軸上的值的信息和時間的工具提示到圓形，X軸和Y軸標題。我試圖把代碼放在svg.selectAll中，但是沒有得到圖形顯示本身。請幫我這個將工具提示和x軸，y軸標題添加到D3.js圖表
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function ($scope) {
//setting the data in the scope
$scope.data = [{
"date": "2012-04-30T18:30:00.000Z",
"close": 58.13,
"ews" : 3,
}, {
"date": "2012-04-29T18:30:00.000Z",
"close": 53.98,
"ews" : 3
}, {
"date": "2012-04-26T18:30:00.000Z",
"close": 67,
"ews" : 3
}, {
"date": "2012-04-24T18:30:00.000Z",
"close": 99,
"ews" : 2
}, {
"date": "2012-04-23T18:30:00.000Z",
"close": 80,
"ews" : 3
}, {
"date": "2012-04-22T18:30:00.000Z",
"close": 167,
"ews" : 0
}, {
"date": "2012-04-19T18:30:00.000Z",
"close": 234,
"ews" : 3
}, {
"date": "2012-04-18T18:30:00.000Z",
"close": 101,
"ews" : 1
}, {
"date": "2012-04-17T18:30:00.000Z",
"close": 92,
"ews" : 2
}, {
"date": "2012-04-16T18:30:00.000Z",
"close": 96,
"ews" : 2
}, {
"date": "2012-04-15T18:30:00.000Z",
"close": 58,
"ews" : 3
}, {
"date": "2012-04-12T18:30:00.000Z",
"close": 105,
"ews" : 1
}, {
"date": "2012-04-11T18:30:00.000Z",
"close": 238,
"ews" : 3
}, {
"date": "2012-03-29T18:30:00.000Z",
"close": 108,
"ews" : 1
}, {
"date": "2012-03-28T18:30:00.000Z",
"close": 96,
"ews" : 2
}, {
"date": "2012-03-27T18:30:00.000Z",
"close": 198,
"ews" : 0
}];
}]);
app.directive('linearChart', function() {
return {
restrict: 'EA',
link: function (scope, elem, attrs) {
var data = scope.data;
// Set the dimensions of the canvas/graph
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date/time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function (d) {
return x(new Date(d.date));
})
.y(function (d) {
return y(d.close);
});
// Adds the svg canvas
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return new Date(d.date);
}));
y.domain([0, d3.max(data, function (d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", function (d) {
if (d.ews==0) return "green";
if (d.ews==1) return "yellow";
if (d.ews==2) return "orange";
if (d.ews==3) return "red";
})
.attr("cx", function (d) {
return x(new Date(d.date));
})
.attr("cy", function (d) {
return y(d.close);
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
};
});h1 {
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
}
body {
font: 12px Arial;
}
path {
stroke: #35cc99;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: gray;
stroke-width: 1;
shape-rendering: crispEdges;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Line chart</title>
<link href="style.css" rel="stylesheet">
\t <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="myController">
<h1>My Chart</h1>
<svg linear-chart></svg>
</body>
</html>
謝謝西里爾....現在它的工作。 –
我希望日期文本稍微向下+ 10px和粗體。 X軸值爲11月2日，11月3日等。工具提示應顯示值和時間。請解釋你如何解析日期。請幫忙。我嘗試過，但整個路線變化:( –
我得到了日期格式，如11月2日，11月3日，代碼 - > var xAxis = d3.svg.axis（）。scale（x） .orient（「bottom」） .ticks（5）.tickFormat（d3.time.format（「％d％b」））; –