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)

这有效地创建了轴，但是现在，我想在每个时刻点击一些用于样式的类，例如＆＃39;零＆＃39;，＆＃39; max＆＃39;或者其他什么。

我的第一个方法是选择所有刻度并执行以下操作：

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

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

为什么我无法访问D3data？我怎么能这样做？

提前致谢：）

Answer 1

你可以根据匿名函数外部定义的数组为你的tick添加一个类，因为该数组对于匿名函数是可见的：它是在外部作用域中声明的。

这是一个基本的例子：我正在使用一个名为.zero的数组，我正在设置两个刻度的类：一个值为0（类“0”，1月）和其他的价值是11（“十一”，三月）。检查轴，你会看到。为了便于查看，我在CSS中将.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>

width: 200,
margin: [10,25,50,75]

D3：根据x轴值在y轴上添加类别

1 个答案: