Question

我们是否可以根据相应的y值在x轴上指定刻度值？例如，我有一个日期/时间序列x轴，表示日期和价格值作为我的y轴。我想只显示某些y轴值的x轴值，这些值根据用户输入而变化。

Answer 1

最简单的方法是根本不绘制x轴标签或隐藏它们。然后使用enter（）和data（）函数手动添加标签。您需要预先确定标签的放置位置，并仅将结果传递给data（）。这是一个古怪的未经测试的代码示例代码片段：

d3.select("#myGraph .xAxis").selectAll("g")
    .data([1, 3, 13, 1355, 4678, 9999])
    .enter().append("g")
        .attr("y", - this.graphHeight)   # put them all at the bottom
        .attr("x", function(d) {return d;})
        .append("text").text(function(d) {return d;})

上面示例中的

“d”是传递给data（）的数组中当前迭代的项。您还可以传递JS对象并访问其属性。这样您就可以传递自己的标签等。

或者像平常一样创建图表。然后从x轴克隆其中一个标签并删除所有标签。在任何enter（）范围之外手动解析数据，并使用它作为模板创建标签的克隆。您仍然可以操纵单个x位置和文本内容。如果您不熟悉D3 API，这种方式会更容易（我知道它很容易被它弄糊涂）。

Answer 2

如果用户可以指定的y值出现在数据本身中，因此您可以直接获得相应的x值，这很容易。您需要做的就是从原始数据中过滤掉所有没有请求y值的内容并提取x坐标：

var data = [[1,1], [2,2], [3,4], [4,1]];

var yToShow = [1, 2],
    xTicks = data.filter(function(d) { return yToShow.indexOf(d[1]) > -1; })
                 .map(function(d) { return d[0]; });

然后您可以使用.tickValues() function明确设置这些标记：

xAxis.tickValues(xTicks);

完整演示here。

显示特定的Tick值

2 个答案: