基于D3.js和AngularJS的线图定制
基于D3.js和AngularJS的线图定制
提问于 2015-10-31 10:42:17
我正在用Ionic的D3.js库和AngularJS开发一个线条图。我想根据Y轴的值定制数据点的颜色.比方说，数值在0-30范围内以绿色表示数据点，值在31-40范围内以黄色表示数据点，值在41-60范围内以红色表示数据点等。我首次使用D3。此外，在我的代码中，我将动态地从后端json文件中获取数据(具体而言)。在后端，有一个名为e(依赖于Y轴的数据值)的参数，其范围从0到3，因此在前端设置颜色代码取决于e的值。此外，e参数对于Y轴的不同场景(销售、税收)也会非常谨慎。对于销售来说，0代表110-150，而对于税收，0代表50-90。有人能帮我吗？期望线图图像
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-31 11:52:54
您可以尝试这样的方法来为y轴值着色圆周节点(在我的示例中，在其数据close下面)：
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", function(d){
if (d.close < 100)
return "red";
if (d.close < 200)
return "brown";
if (d.close < 300)
return "green";
if (d.close < 400)
return "blue";
if (d.close < 500)
return "yellow" ;
if (d.close < 600)
return "pink" ;
if (d.close < 700)
return "orange" ;
})从角度上说，你需要把它作为指令.
我添加了一个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
});全工作代码这里
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33450650
复制相关文章
相似问题
腾讯云开发者
