javascript - 从 json 文件构造 bar 的工具提示值-6ren

javascript - 从 json 文件构造 bar 的工具提示值

转载作者：行者123 更新时间：2023-12-03 01:21:01

我目前正在努力使工具提示正常工作。页面如下所示 [参见下面的照片 1]，我尝试为每个条形指定 y 值。 y 值存储在 resumeperday.json [见下文]，其中包含每天的“time”和“y”属性。 time 属性是日期，y 是当天的订单数量。 resumeperday.json 文件作为 dataset 变量存储在 index.html 文件中。我试图解析它的 y 值，它是所有三个不同订单的总和(每个日期都有 3 个不同的值)，并在鼠标悬停时将其显示在栏上。当我使用这行代码时

  .html(function(d) {
        return "<strong>Number of orders:</strong> <span style='color:red'>" + d3.max(dataset, function(d) {
                        return d3.max(d, function(d) {
                            return d.y0 + d.y;
                        });
                    }) + "</span>";
        })

问题:每个柱仅显示123(这是订单的最大值)，我正在尝试构建一个函数，该函数将根据到悬停的特定栏。

这是index.html代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pizza orders</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <style>
        .axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.dot {
  stroke: #000;
}


.legend {
                padding: 5px;
                font: 10px sans-serif;
                background: yellow;
                box-shadow: 2px 2px 1px #888;
            }
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}-align: center;
}
        </style>
    </head>
    <body>
        <div>
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                         Pizza orders per hour <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a class="m" value="2018-07-15" href="#">2018-07-15</a></li>
                    <li><a class="m" value="2018-07-16" href="#">2018-07-16</a></li>
                    <li><a class="m" value="2018-07-17" href="#">2018-07-17</a></li>
                    <li><a class="m" value="2018-07-18" href="#">2018-07-18</a></li>
                    <li><a class="m" value="2018-07-19" href="#">2018-07-19</a></li>
                    <li><a class="m" value="2018-07-20" href="#">2018-07-20</a></li>
                    <li><a class="m" value="2018-07-21" href="#">2018-07-21</a></li>
                </ul>
            </div>

        <div id="mbars">
        </div>
        </div>
        <script type="text/javascript">
        var w = 700;                        //width
        var h = 600;                        //height
        var padding = {top: 40, right: 40, bottom: 40, left:25};
        var dataset;
        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
        return "<strong>Number of orders:</strong> <span style='color:red'>" + d3.min(dataset, function(d) {
                        return d3.min(d, function(d) {
                            return d.y0 + d.y;
                        });
                    }) + "</span>";
        })
        //Set up stack method
        var stack = d3.layout.stack();

        d3.json("resumeperday.json",function(json){
            dataset = json;

            //Data, stacked
            stack(dataset);

            var color_hash = {
                    0 : ["50-70₪","#0000FF"],
                    1 : ["70.00-120₪","#FF0000"],
                    2 : ["120+₪","#04B404"]

            };


            //Set up scales
            var xScale = d3.time.scale()
                .domain([new Date(dataset[0][0].time),d3.time.day.offset(new Date(dataset[0][dataset[0].length-1].time),2)])
                .rangeRound([0, w-padding.left-padding.right]);

            var yScale = d3.scale.linear()
                .domain([0,             
                    d3.max(dataset, function(d) {
                        return d3.max(d, function(d) {
                            return d.y0 + d.y;
                        });
                    })
                ])
                .range([h-padding.bottom-padding.top,0]);

            var xAxis = d3.svg.axis()
                           .scale(xScale)
                           .orient("bottom")
                           .ticks(d3.time.days,1);

            var yAxis = d3.svg.axis()
                           .scale(yScale)
                           .orient("left")
                           .ticks(10);



            //Easy colors accessible via a 10-step ordinal scale
            var colors = d3.scale.category10();

            //Create SVG element
            var svg = d3.select("#mbars")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.call(tip);


            // Add a group for each row of data
            var groups = svg.selectAll("g")
                .data(dataset)
                .enter()
                .append("g")
                .attr("class","rgroups")
                .attr("transform","translate("+ (padding.left) + "," + (h - padding.bottom) +")")
                .style("fill", function(d, i) {
                    return color_hash[dataset.indexOf(d)][1];
                })
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);

            // Add a rect for each data value
            var rects = groups.selectAll("rect")
                .data(function(d) { return d; })
                .enter()
                .append("rect")
                .attr("width", 2)
                .style("fill-opacity",1e-6);


            rects.transition()
                 .duration(function(d,i){
                     return 500 * i;
                 })
                 .ease("linear")
                .attr("x", function(d) {
                    return xScale(new Date(d.time));
                })
                .attr("y", function(d) {
                    return -(- yScale(d.y0) - yScale(d.y) + (h - padding.top - padding.bottom)*2);
                })
                .attr("height", function(d) {
                    return -yScale(d.y) + (h - padding.top - padding.bottom);
                })
                .attr("width", 15)
                .style("fill-opacity",1);

                svg.append("g")
                    .attr("class","x axis")
                    .attr("transform","translate(40," + (h - padding.bottom) + ")")
                    .call(xAxis);


                svg.append("g")
                    .attr("class","y axis")
                    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                    .call(yAxis);

                // adding legend

                var legend = svg.append("g")
                                .attr("class","legend")
                                .attr("x", w - padding.right - 65)
                                .attr("y", 25)
                                .attr("height", 100)
                                .attr("width",100);

                legend.selectAll("g").data(dataset)
                      .enter()
                      .append('g')
                      .each(function(d,i){
                        var g = d3.select(this);
                        g.append("rect")
                            .attr("x", w - padding.right - 30)
                            .attr("y", i*25 + 10)
                            .attr("width", 10)
                            .attr("height",10)
                            .style("fill",color_hash[String(i)][1]);

                        g.append("text")
                         .attr("x", w - padding.right - 15)
                         .attr("y", i*25 + 20)
                         .attr("height",30)
                         .attr("width",100)
                         .style("fill",color_hash[String(i)][1])
                         .text(color_hash[String(i)][0]);
                      });

                svg.append("text")
                .attr("transform","translate(5,20) rotate(0)")
                .attr("font-weight","bold")
                .text("Pizza Orders");

            svg.append("text")
               .attr("class","xtext")
               .attr("x",w/2 - padding.left)
               .attr("y",h - 5)
               .attr("text-anchor","middle")
               .attr("font-weight","bold")
               .text("Days");

            svg.append("text")
            .attr("class","title")
            .attr("x", (w / 2))             
            .attr("y", 20)
            .attr("text-anchor", "middle")
            .attr("font-weight","bold")         
            .style("font-size", "16px") 
            .style("text-decoration", "underline")  
            .text("Number of Pizza Orders per day");

            //On click, update with new data            
            d3.selectAll(".m")
                .on("click", function() {
                    var date = this.getAttribute("value");

                    var str;
                    if(date == "2018-07-15"){
                        str = "15.json";
                    }else if(date == "2018-07-16"){
                        str = "16.json";
                    }else if(date == "2018-07-17"){
                        str = "17.json";
                    }else if(date == "2018-07-18"){
                        str = "18.json";
                    }else if(date == "2018-07-19"){
                        str = "19.json";
                    }
                    else if(date == "2018-07-20"){
                        str = "20.json";
                    }else{
                        str = "21.json";
                    }

                    d3.json(str,function(json){

                        dataset = json;
                        stack(dataset);

                        console.log(dataset);

                        xScale.domain([new Date(0, 0, 0,dataset[0][0].time,0, 0, 0),new Date(0, 0, 0,dataset[0][dataset[0].length-1].time,0, 0, 0)])
                        .rangeRound([0, w-padding.left-padding.right]);

                        yScale.domain([0,               
                                        d3.max(dataset, function(d) {
                                            return d3.max(d, function(d) {
                                                return d.y0 + d.y;
                                            });
                                        })
                                    ])
                                    .range([h-padding.bottom-padding.top,0]);

                        xAxis.scale(xScale)
                             .ticks(d3.time.hour,1)
                             .tickFormat(d3.time.format("%H"));

                        yAxis.scale(yScale)
                             .orient("left")
                             .ticks(10);

                         groups = svg.selectAll(".rgroups")
                            .data(dataset);

                            groups.enter().append("g")
                            .attr("class","rgroups")
                            .attr("transform","translate("+ padding.left + "," + (h - padding.bottom) +")")
                            .style("fill",function(d,i){
                                return color(i);
                            });


                            rect = groups.selectAll("rect")
                            .data(function(d){return d;});

                            rect.enter()
                              .append("rect")
                              .attr("x",w)
                              .attr("width",1)
                              .style("fill-opacity",1e-6);

                        rect.transition()
                            .duration(1000)
                            .ease("linear")
                            .attr("x",function(d){
                                return xScale(new Date(0, 0, 0,d.time,0, 0, 0));
                            })
                            .attr("y",function(d){
                                return -(- yScale(d.y0) - yScale(d.y) + (h - padding.top - padding.bottom)*2);
                            })
                            .attr("height",function(d){
                                return -yScale(d.y) + (h - padding.top - padding.bottom);
                            })
                            .attr("width",15)
                            .style("fill-opacity",1);

                        rect.exit()
                           .transition()
                           .duration(1000)
                           .ease("circle")
                           .attr("x",w)
                           .remove();

                        groups.exit()
                           .transition()
                           .duration(1000)
                           .ease("circle")
                           .attr("x",w)
                           .remove();


                        svg.select(".x.axis")
                           .transition()
                           .duration(1000)
                           .ease("circle")
                           .call(xAxis);

                        svg.select(".y.axis")
                           .transition()
                           .duration(1000)
                           .ease("circle")
                           .call(yAxis);

                        svg.select(".xtext")
                           .text("Hours")
                           .attr("font-weight","bold");

                        svg.select(".title")
                        .text("Number of Pizza Orders per hour on " + date)
                        .attr("font-weight","bold");
                    });         
                });


        });

        </script>
    </body>
</html>

resumeperday.json 文件:

[
    [
        {
            "time": "2018-07-15",
            "y": 27
        },
        {
            "time": "2018-07-16",
            "y": 23
        },
        {
            "time": "2018-07-17",
            "y": 28
        },
        {
            "time": "2018-07-18",
            "y": 20
        },
        {
            "time": "2018-07-19",
            "y": 22
        },
        {
            "time": "2018-07-20",
            "y": 27
        },
        {
            "time": "2018-07-21",
            "y": 21
        }
    ],
    [
        {
            "time": "2018-07-15",
            "y": 29
        },
        {
            "time": "2018-07-16",
            "y": 26
        },
        {
            "time": "2018-07-17",
            "y": 31
        },
        {
            "time": "2018-07-18",
            "y": 27
        },
        {
            "time": "2018-07-19",
            "y": 31
        },
        {
            "time": "2018-07-20",
            "y": 65
        },
        {
            "time": "2018-07-21",
            "y": 37
        }
    ],
    [
        {
            "time": "2018-07-15",
            "y": 17
        },
        {
            "time": "2018-07-16",
            "y": 16
        },
        {
            "time": "2018-07-17",
            "y": 16
        },
        {
            "time": "2018-07-18",
            "y": 15
        },
        {
            "time": "2018-07-19",
            "y": 22
        },
        {
            "time": "2018-07-20",
            "y": 31
        },
        {
            "time": "2018-07-21",
            "y": 23
        }
    ]
]

[照片1]仅对于该特定栏“123”是正确的。

最佳答案

问题是您按颜色对矩形进行分组。如果将鼠标悬停在矩形上，您将获得属于该颜色组的数据。您没有任何迹象表明您将鼠标悬停在哪个栏上。

按类而不是元素类型选择组。

var groups = svg.selectAll(".rgroups")
                .data(dataset)
                .enter()
                .append("g")
                .attr("class","rgroups")
                .attr("transform","translate("+ (padding.left) + "," + (h - padding.bottom) +")")
                .style("fill", function(d, i) {
                    return color_hash[dataset.indexOf(d)][1];
                })
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);

您必须转换数据集，以便拥有一个代表特定条形的所有数据的对象/数组。 d3.nest 可能会有所帮助。

然后为每个柱构建一个 g 并将矩形添加到该 g 中。然后在工具提示中您将获得属于该栏的数据。

仔细看看 .d3-tip.n:after 的样式。它有一个错误。

关于javascript - 从 json 文件构造 bar 的工具提示值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51765492/

文章推荐： javascript - RegExp 转到 toString 然后返回时出现意外行为

Haskell 提示/为什么这不是线性缩放？
我的 friend 编写了一个程序，它比较随机排列的骰子面，以找到分布最均匀的面——尤其是当面不仅仅是序列时。我将他的程序翻译成 haskell 是因为我一直在寻找一个理由来让别人知道 haskel
Yii:模型属性的注释/提示
我需要对表单中的某些字段进行评论/提示。我的想法是在模型中描述它，就像attributeLabels一样。我该怎么做？然后它会是理想的，如果 Gii 模型(和 Crud)生成器直接从 mysql 列
delphi - 如何处理第三方库中的警告/提示？
我们使用 FastReport 来生成报告。事实上，我们为访问源代码付费。我们目前使用的是 FastReport 的最新稳定版本。虽然它对于我们的生产来说足够稳定，但每当我编译时，我都会看到以下内容
WPF:创建对话框/提示
我需要创建一个对话框/提示，包括用于用户输入的文本框。我的问题是，确认对话框后如何获取文本？通常我会为此创建一个类，将文本保存在属性中。不过我想使用 XAML 设计对话框。因此，我必须以某种方式扩展
php - 提示/警告用户删除按钮并运行脚本进行删除
我想提示用户是否要执行操作(删除) - 用警报框说"is"或“否”，如果是，则运行删除脚本，如果否，则不执行任何操作我不太了解 javascript，因此是否有人可以使用 javascript 获得
Javascript 在函数后不断变得未定义 - 提示
所以我正在编写一个简单的 JS 代码。我们刚刚开始学习函数。我需要创建一个名为“printStars”的函数。我需要从用户那里获取一个号码，并根据该号码打印“*”。这就是我所做的:
在页面显示之前加载 Javascript 提示
我在我的页面上添加了一个提示，但它在页面加载之前加载了。如何仅在整个页面可见时才显示消息？这是我的提示: if (name == null || name == "") { txt == "No
在页面显示之前加载 Javascript 提示
我在我的页面上添加了一个提示，但它在页面加载之前加载了。如何仅在整个页面可见时才显示消息？这是我的提示: if (name == null || name == "") { txt == "No
zsh 提示 - 检查是否有任何后台作业
我正在自定义我的 zsh 提示，并发现以下内容来检查是否有任何后台作业: if [[ $(jobs | wc -l) -gt 0 ]]; then # has background job(s)
JavaScript 提示/警报问题
这个问题在这里已经有了答案: JavaScript object: access variable property by name as string [duplicate] (3 个答案) pa
没有出现 JavaScript 提示
我正在尝试用 javascript 制作一个简单的数学练习程序。在提示警报中给出不同的值，并将答案与用户输入进行比较。这是代码: Calculations generate(); functio
android - 如何在编辑文本的中心对齐文本(提示)
在这段代码中，尽管我使用了文本对齐属性在“编辑文本” View 的中心设置“提示”。但它无法正常工作。最佳答案尝试关于android - 如何在编辑文本的中心对齐文本(提示)，我们在Sta
java - 提示 EditText
我正在尝试让我的 EditText 显示一个提示，例如“请在此处输入答案”，当用户点击 EditText 以键入他们的答案时，文本应该消失并留空，以便他们在其中输入答案. 截至目前，这就是我的 .xm
Android Spinner 提示？
我当前的 android 应用程序中有两个微调器，我想要一个默认值，例如 editText 的 android:hint 功能。有没有办法这样做，但不会将提示添加到填充微调器的字符串数组。例如从微调器
带名称的 JavaScript 提示
如果我的表单已完全填写，我如何提示“感谢您填写表单，“name”!” function submit_onclick() { if(confirm("Thanks for completing t
JavaScript 提示()命令
我刚刚了解了prompt()命令；我知道 Prompt() 命令以字符串的形式返回用户输入。我正在搞乱下面的程序，我输入了Per“Dead”Ohlin作为男性名字。为什么这有效并且没有引起任何问题？
提示 FILE * 未初始化
void openUpNow(FILE *x, FILE *y) { x = fopen("xwhatever", "r"); y = fopen("ywhatever", "r");
JavaScript 提示() 方法
我有一个作业正在处理，但我在使用 prompt() 方法时遇到了问题。我看到我可以做一个提示，但我需要几个并且有数量。例如... 我创建了一个 HTML 表格，其中包含许多艺术家和包含 DVD、CD
ios - 我对这个练习的解决方案似乎太简单了；提示？
我正在学习 Big Nerd Ranch 的 iOS Programming, 2nd Edition，我已经来到第 4 章挑战:标题。该练习暗示我感到困惑；它说我需要做一些我认为不需要做的事情。到
PHPUnit 提示 Selenium
抱歉，如果这是微不足道的，但我没有找到任何解决此问题的建议。我在 Ubuntu 上，我的 Yii 项目需要 PHPUnit。我已经安装了 PHPUnit 两次，方法是下载 phpunit.phar 并

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从 json 文件构造 bar 的工具提示值