javascript - 使用 D3.js 和 AngularJS 定制折线图

Question

我正在 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。有人可以帮我吗？ Expected line chart image

Answer 1

您可以尝试这样的方法来为 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" ;  
    })

对于 Angular ，你需要将其作为指令......

编辑我添加了一个 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

希望这有帮助!