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（“十一”類） ”，三月）。 檢查軸，您會看到。 為了更容易地看到，我設置.zero紅色和.eleven在CSS綠色。

 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>