D3：根据x轴值在y轴上添加刻度

Question

我正在使用d3 lib构建图。

图表非常简单，y轴为欧元，x轴为货币，因此我可以显示一段时间内银行帐户的演变情况。

我想在月份标签上添加一些样式，具体取决于该月帐户上可用的相应金额，请绘制x轴，如下所示：

（d3Data包含绘制图形所需的所有数据）

d3Data.xScale = d3.scale.ordinal().domain(
  d3Data.dateStates.map(function(dateState) {
      return dateState.xValue
  })
);

xAxis = d3.svg.axis().scale(d3Data.xScale).orient("bottom")

d3Data.chart.append("g").call(xAxis)

这有效地创建了轴，但现在，我想在每个刻度上添加一些样式类，例如“零”，“最大”或其他。

我的第一种方法是选择所有刻度，然后执行以下操作：

d3Data.chart.selectAll(".xAxisItemClass")
  .attr('class', function(data, index) {
    if (d3Data.months[index].value === 0)
      return 'zero'
  });

但是d3Data在作为第二个参数传递给attr()调用的匿名函数中不存在。我在d3上有点菜鸟，所以可能我错过了一些东西，因为这么简单这应该很容易

为什么我内部无法访问D3data？我怎样才能做到这一点？

提前致谢 ：）

Answer 1

您可以基于在匿名函数外部定义的数组向刻度添加类，因为该数组对匿名函数可见：它是在外部作用域中声明的。

这是一个基本示例：我使用一个名为的数组，data并且设置了两个刻度的类：一个刻度值为0（“零”类，一月），另一个刻度值为11（“十一”类） ，三月）。检查轴，您会看到。为了更易于查看，我在CSS中设置.zero为红色和.eleven绿色。

var width = 550, height = 200;

var data = [{month: "Jan", value: 0},
{month: "Feb", value: 30},
{month: "Mar", value: 11},
{month: "Apr", value: 60},
{month: "May", value: 20},
{month: "Jun", value: 88}
];

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var xScale = d3.scale.ordinal()
    .domain(data.map(function(d){ return d.month}))
    .rangeBands([0, width*0.95])
	
var xAxis = d3.svg.axis().scale(xScale)
	.orient("bottom");

svg.append("g")
	.attr("transform", "translate(10,100)")
	.attr("class", "x axis")
	.call(xAxis);
	
var ticks = d3.selectAll(".tick text");

ticks.attr("class", function(d,i){
 if(data[i].value == 11){ return "eleven"}
 else if(data[i].value == 0){ return "zero"}
});

.axis path, .axis line {
fill: none;
stroke: #4e5a64;
shape-rendering: crispEdges;
}

.zero{
fill: red
}

.eleven{
fill:green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>