D3.js d3 xAxis，带顺序刻度和点击事件？

我将创建一个具有x轴（顺序刻度）的图表。轴上的每个标签都有一个单击事件。x轴标签的数据存储在JSON对象（xAxisData.Label）-my xscale.domain中。但是当我点击标签时，我需要json对象的ID（但我的数据域只是标签）。那么，如何将ID附加到标签中？thx

xAxisData: {
              ID: 1,
              TimeStamp: 01.01.2014 00::00,
              Label: "00:15",
            },

xAxisLabels = d3.set(xAxisData.map(function (d) { return d.Label; })).values(); 

xScale = d3.scale.ordinal()
            .rangeBands([0, chartWidth], 0.1)
            .xScale.domain(xAxisLabels);

---

您可以将对象本身用作域的输入：

xScale = d3.scale.ordinal()
        .rangeBands([0, chartWidth], 0.1)
        .xScale.domain(xAxisData);

然后，要将

标签

作为标签，请使用轴的

.tickFormat（）

功能：

xAxis = d3.svg.axis().scale(xScale)
          .tickFormat(function(d) { return d.Label; });

现在，绑定到ticks的数据包含了所有内容，您可以在事件处理程序中使用

d.ID

更新

这并不像预期的那样有效，因为D3将域值强制转换为字符串，并将它们映射到比例索引。在这种情况下，这不起作用，因为对象总是被强制为相同的值。一个快速修复方法是自己指定字符串化（即转换为JSON），并在幕后处理必要的转换：

xScale = d3.scale.ordinal()
            .domain(data.map(JSON.stringify))
            .rangeBands([0, w], 0.1); // 1%

xAxis = d3.svg.axis()
         .scale(xScale)
         .tickFormat(function (d) {
             return JSON.parse(d).label;
         })
         .orient("bottom");

---

完整的例子。

嗨，拉尔斯，谢谢你的回答！你确定这种格式适用于顺序刻度吗？我在

.tickFormat（函数（d）{returnd.Label；}）中只得到一个值-但是我的数据集有更多的值？是的，为每个标签执行该函数。嗯。。不幸的是，这对我不起作用，我做错了什么？您将数组数组传递给
.domain（）
，而不仅仅是数组，但我也错误地认为能够使用对象——我将用一个有效的解决方案更新答案。