在D3多折线图的工具提示中访问数据

Accessing data in Tooltip on D3 Multi-line Chart

本文关键字：访问 数据 工具提示 D3 折线图      更新时间：2023-09-26

这是我的数据

var data = [
    {
        "label": "branch-1",
        "values": [
            { "day": "Monday", "value": 20},
            { "day": "Tuesday", "value": 18},
            { "day": "Wednesday", "value": 29},
            { "day": "Thursday", "value": 31},
            { "day": "Friday", "value": 37},
            { "day": "Saturday", "value": 25},
            { "day": "Sunday", "value": 19}
        ]
    },
    {
        "label": "branch-2",
        "values": [
            { "day": "Monday", "value": 32},
            { "day": "Tuesday", "value": 29},
            { "day": "Wednesday", "value": 37},
            { "day": "Thursday", "value": 41},
            { "day": "Friday", "value": 31},
            { "day": "Saturday", "value": 28},
            { "day": "Sunday", "value": 17}
        ]
    }
]

我试图添加标签到工具提示，但得到错误"未定义"。我还需要在每行末尾附加标签。与此示例中的名称类似。但我不知道如何做到这一点。

要在工具提示中获得标签，您需要在单个数据点中拥有标签名称:

按如下方式修改数据处理块:

data.forEach(function (kv) {
    var labelName = kv.label;
    kv.values.forEach(function (d) {
        d.value = +d.value; 
        d.label = labelName;
    });
});

要添加标签，添加以下部分:

city.append("text")
      .attr("transform", function(d) { var dayExt = d.values[d.values.length - 1].day; var valueExt = d.values[d.values.length - 1].value;  return "translate(" +  x(dayExt) + "," + y(valueExt) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.label });

请在这里找到完整的小提琴:http://jsfiddle.net/prashant_11235/LY8zt/

您可以根据需要为标签名称设置适当的样式。

相关文章：