无法在d3中为轴添加标签

时间:2017-01-19 16:19:26

标签: javascript d3.js

我有这个代码,我似乎无法为轴创建标签。我曾尝试复制其他脚本所做的事情,但我对D3的了解非常缺乏。

特别是我试图将这段代码与我所遇到的灾难性结果合并:

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Temperature (ºF)");

我拥有的东西:

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
   .append("text")
   .attr("class", "label")
   .attr("transform", "translate(" + width + ",0)")
   .attr("y", -5)
   .style("text-anchor", "end")
   .text("Frequency");

以下是bl.ocks.org link

这是gist

1 个答案:

答案 0 :(得分:0)

您的标签位于您指定位置的DOM中。你只需要设计它以使其可见:

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
       .append("text")
       .attr("class", "label")
       .attr("fill", "black") // <= Here
       .attr("transform", "translate(" + width + ",0)")
       .attr("y", -5)
       .style("text-anchor", "end")
       .text("Frequency");

或者只是使用CSS:

.label {
  fill: black;
}