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>