我想添加工具提示，其中包含Y轴上的值信息和时间到圆，X轴和Y轴标题。我试图将代码放在svg.selectAll中，但未能自动显示图形。请帮助我
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">
<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>
答案 0 :(得分：1)
对于x轴/ y轴上的标签，请执行以下操作：
//text label for y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
// text label for the x axis
svg.append("text")
.attr("x", width/2 )
.attr("y", height +35)
.style("text-anchor", "middle")
.text("Date");
我添加了一个用于显示工具提示的div，如下所示
<div id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
<div id="ttclose"></div>
<div id="ttdate"></div>
</div>
然后在移动事件中，您可以显示和设置值，如下所示：
.on("mouseover", function () {
return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
})
.on("mousemove", function (d) {
console.log()
d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
d3.select("#mytooltip").select("#ttdate").text(function () {
return d.date; //setting the date values to tooltip
});
d3.select("#mytooltip").select("#ttclose").text(function () {
return d.close; //setting the date values to tooltip
});
return;
})
.on("mouseout", function () {
return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
});
工作代码here
希望这有帮助！