加入工具提示和X轴，Y轴标题D3.js图表 [英] Adding tooltip and x axis, y axis title to D3.js chart
本文介绍了加入工具提示和X轴，Y轴标题D3.js图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
欲与Y轴和时间的圆，X轴和Y轴标题的价值信息添加提示。我试图把code在svg.selectAll，但未能获得该图显示的内容本身。请帮我这个
\r
\r\r
\r VAR应用= angular.module（'对myApp'，[]）;\r
app.controller（'myController的'，['$范围'，函数（$范围）{\r
//在范围设置数据\r
$ scope.data = [{\r
日期：2012-04-30T18：30：00.000Z\r
关闭：58.13，\r
EWS：3，\r
}，{\r
日期：2012-04-29T18：30：00.000Z\r
关闭：53.98，\r
EWS：3\r
}，{\r
日期：2012-04-26T18：30：00.000Z\r
关闭：67，\r
EWS：3\r
}，{\r
日期：2012-04-24T18：30：00.000Z\r
关闭：99，\r
EWS：2\r
}，{\r
日期：2012-04-23T18：30：00.000Z\r
关闭：80，\r
EWS：3\r
}，{\r
日期：2012-04-22T18：30：00.000Z\r
关闭：167，\r
EWS：0\r
}，{\r
日期：2012-04-19T18：30：00.000Z\r
关闭：234，\r
EWS：3\r
}，{\r
日期：2012-04-18T18：30：00.000Z\r
关闭：101，\r
EWS：1\r
}，{\r
日期：2012-04-17T18：30：00.000Z\r
关闭：92，\r
EWS：2\r
}，{\r
日期：2012-04-16T18：30：00.000Z\r
关闭：96，\r
EWS：2\r
}，{\r
日期：2012-04-15T18：30：00.000Z\r
关闭：58，\r
EWS：3\r
}，{\r
日期：2012-04-12T18：30：00.000Z\r
关闭：105，\r
EWS：1\r
}，{\r
日期：2012-04-11T18：30：00.000Z\r
关闭：238，\r
EWS：3\r
}，{\r
日期：2012-03-29T18：30：00.000Z\r
关闭：108，\r
EWS：1\r
}，{\r
日期：2012-03-28T18：30：00.000Z\r
关闭：96，\r
EWS：2\r
}，{\r
日期：2012-03-27T18：30：00.000Z\r
关闭：198，\r
EWS：0\r
}];\r
\r
}]）;\r
app.directive（'linearChart'，函数（）{\r
返回{\r
限制：EA，\r
\r
链接：功能（范围，ELEM，ATTRS）{\r
VAR数据= scope.data;\r
//设置画布/图形的尺寸\r
VAR利润率= {\r
顶部：30，\r
右：20，\r
底部：30，\r
左：50\r
}，\r
宽度= 600 - margin.left - margin.right，\r
高度= 270 - margin.top - margin.bottom;\r
\r
//解析的日期/时间\r
VAR parseDate = d3.time.format（％D-％B-％y）的解析。\r
\r
//设置范围\r
。VAR X = d3.time.scale（）范围（[0，宽度]）;\r
。变种Y = d3.scale.linear（）范围（[高度，0]）;\r
\r
//定义轴\r
VAR XAXIS = d3.svg.axis（）。量表（X）\r
。。东方（底部）蜱（5）;\r
\r
变种Y轴= d3.svg.axis（）。量表（Y）\r
。。东方（左）蜱（5）;\r
\r
//定义行\r
VAR价值线= d3.svg.line（）\r
.X（函数（D）{\r
返回X（新日期（d.date））;\r
}）\r
.Y（函数（D）{\r
返回Y（d.close）;\r
}）;\r
\r
//添加SVG的画布\r
VAR SVG = d3.select（SVG）\r
.attr（宽度，宽+ margin.left + margin.right）\r
.attr（高度，身高+ margin.top + margin.bottom）\r
.append（G）\r
.attr（改造，\r
翻译（+ margin.left +，+ margin.top +））;\r
//缩放数据的范围\r
x.domain（d3.extent（数据，功能（D）{\r
返回新的日期（d.date）;\r
}））;\r
y.domain（[0，d3.max（数据，功能（D）{\r
返回d.close;\r
}）]）;\r
\r
//添加价值线路径。\r
svg.append（路径）\r
.attr（类，线）\r
.attr（D，价值线（数据））;\r
\r
//添加散点图\r
svg.selectAll（点）\r
的.data（数据）\r
。进入（）。追加（圆）\r
.attr（R，3.5）\r
.style（补功能（D）{\r
如果（d.ews == 0）返回绿色;\r
如果（d.ews == 1）返回黄;\r
如果（d.ews == 2）回归橙色;\r
如果（d.ews == 3）回报红;\r
}）\r
.attr（CX功能（D）{\r
返回X（新日期（d.date））;\r
}）\r
.attr（CY功能（D）{\r
返回Y（d.close）;\r
}）;\r
\r
\r
//添加X轴\r
svg.append（G）\r
.attr（类，X轴）\r
.attr（转换，翻译（0，+高度+））\r
.CALL（X轴）;\r
\r
//添加Y轴\r
svg.append（G）\r
.attr（类，Y轴）\r
.CALL（Y轴）;\r
\r
}\r
};\r
}）; \r
H1 {\r
FONT-FAMILY：无衬线;\r
字体重量：大胆的;\r
字体大小：16像素;\r
}\r
身体 {\r
字体：12px的宋体;\r
}\r
路径{\r
行程：＃35cc99;\r
笔画宽度：2;\r
补：无;\r
}\r
.axis路径，.axis线{\r
补：无;\r
行程：灰色;\r
笔画宽度：1;\r
形状渲染：crispEdges;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.0.7/angular.min.js\"></script>\r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=对myApp＆GT;\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展性=无，宽度=设备宽度＆GT;\r
＆LT;标题＆GT;的折线图与LT; /标题＆GT;\r
\r
＆LT;链接HREF =style.css文件的rel =stylesheet属性＆GT;\r
\r
＆LT;脚本SRC =http://d3js.org/d3.v3.min.js字符集=utf-8＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =controller.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
＆LT;机身NG控制器=myController的＆GT;\r
＆LT; H1＆gt;我图＆LT; / H1＆GT;\r
＆LT; SVG线性图＆GT;＆LT; / SVG＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
解决方案
有关X轴/ Y轴标签做的：
为y轴的 //文本标签
svg.append（文本）
.attr（改造，旋转（-90））
.attr（Y，0 - margin.left）
.attr（×，0 - （高度/ 2））
.attr（DY，1em的）
.style（文本锚，中间）
的.text（值）;
//为x轴的文本标签
svg.append（文本）
.attr（×，宽/ 2）
.attr（Y，高度+35）
.style（文本锚，中间）
的.text（日期）;
我添加一个div用于显示工具提示象下面
＆LT; DIV ID =mytooltip的风格=的位置是：绝对的; z-index的：10; visibility：hidden的;顶：82px;左：81px;＆GT;
＆LT; DIV ID =ttclose＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =ttdate＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
然后在移动事件，你可以显示和设置如下值：
。对（鼠标悬停功能（）{
返回d3.select（＃mytooltip），风格（知名度，可见）; //使得可视提示
}）
。对（鼠标移动功能（D）{
的console.log（）
d3.select（＃mytooltip）。式（顶部，（d3.mouse（本）[1] + 10）+像素）。式（左，（d3.mouse（本）[0 ] + 10）+像素）;
d3.select（＃mytooltip）。选择（＃ttdate）。文本（函数（）{
返回d.date; //设置日期值工具提示
}）;
d3.select（＃mytooltip）。选择（＃ttclose）。文本（函数（）{
返回d.close; //设置日期值工具提示
}）;
返回;
}）
。对（鼠标移开功能（）{
返回d3.select（＃mytooltip），风格（知名度，隐藏）。 // hidding工具提示
}）;
工作code 这里
希望这有助于！
I want to add tooltip with information of value on Y axis and time to the circle, X-axis and Y-axis title. I tried to put the code in svg.selectAll, but failed to get the graph display itself. Kindly help me with this
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>
解决方案
For label on x axis / y axis do:
//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");
I have added a div for showing tooltip like below
<div id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
<div id="ttclose"></div>
<div id="ttdate"></div>
</div>
Then on move event you can show and set values as below:
.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
});
working code here
Hope this helps!
这篇关于加入工具提示和X轴，Y轴标题D3.js图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
