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

我目前正在努力使工具提示生效。下面是页面的外观（见下面的照片1），我试图为每个条指定y值。y值存储在

resumeperday.json

[见下文]中，该文件具有“time”和“y”属性。时间属性是日期，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>";
        })

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
        }
    ]
]

[Photo1]仅适用于特定条“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。嵌套可能会有所帮助

然后为每个条构造一个

g

，并将矩形添加到此

g

。然后在工具提示中，您将获得属于此条的基准

---

仔细查看

.d3提示的样式。n:after

。它有一个错误。

感谢您的输入！到目前为止，我已经尝试使用

nested_data

变量，并这样实现：

var nested_data=d3.nest（）.key（函数（d）{return d.y0+d.y；}）。还有，我不知道如何在每个条上构造一个
g
，并在
g
上添加矩形，我也会尝试找出答案。在您的原始数据中，哪里有字段
y0
？您需要使用的关键字段是
time
字段。在
d3之前。nest
首先展平数据集。如果还计算
堆栈（数据集）
可以得到很好的对象，可以用来构造
rect
（
y0
是列表中以前的rect的累积和），我不确定如何展平数据集。另外，我可以将
return d.y0+d.y
更改为
return dataset.time
，但它不会做任何事情，因为我需要根据时间将数据集展平，并将三者相加。
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);