Question

我将构建一个带有x轴（序数比例）的图表。轴上的每个标签都有一个点击事件。 x轴标签的数据存储在JSON对象（xAxisData。 Label ）中 - 我的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);

Answer 1

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

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

然后，要将Label作为标签，请使用轴的.tickFormat()功能：

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

现在绑定到刻度线的数据包含所有内容，您可以在事件处理程序中使用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");

完整示例here。

d3 xAxis是否有序数比例和点击事件？

1 个答案: