在 d3.js 中设置轴的 css答案

【问题标题】：setting css of axis in d3.js在 d3.js 中设置轴的 css
【发布时间】：2012-07-27 18:58:03
【问题描述】：

在 d3.js 中是否可以做 .axis path { fill : none }？

我在 .call(d3.svg.axis() 上尝试了 .attr 和 .style 但无济于事。我只是在这里做错了...

我用来创建轴的完整代码如下：

 // create Axis
  svg.selectAll("axis")
      .data(d3.range(angle.domain()[1]))
    .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
    .call(d3.svg.axis()
      .scale(radius.copy().range([0,0]))
      .ticks(1)
      .tickFormat("")
      .orient("left"))
      .attr("fill","none") // EDITED WITH FILL NONE
    .append("text") 
      .attr("y", 
        function (d) {
          if (window.innerWidth < 455){
            console.log("innerWidth less than 455: ",window.innerWidth);
            return -(0);
          }
          else{
            console.log("innerWidth greater than 455: ",window.innerWidth);
            return -(0);
          }
        })
      .attr("dy", "0em");

【问题讨论】：

你想达到什么目的，它在什么方面不起作用？
@LarsKotthoff 我想在我的轴上附加一些 css 以复制当前内联在 html 文件中的 .axis path { fill: none} 。我想用 d3 attr 或 style 替换内联 css
你有没有试过将.attr("fill", "none")直接添加到轴路径？
你能举个例子说明你有什么不起作用吗？
@LarsKotthoff 刚刚尝试过，我得到的响应是“没有方法 'attr'”

标签： javascript svg d3.js

【解决方案1】：

当我想将 CSS 设置应用于 d3 元素时，我发现最简单的方法是为它们分配一个 ID 或类（您在上面所做的），然后使用 CSS 应用所需的属性。比如保持上面的JS，然后在css中做：

.axis path {

    fill:           none;
}

如果你想在 JS 中做，你应该使用：

.style('fill', 'none')

但是，您应该将其应用于包含轴的 svg，而不是在 .call(d3.svg.axis()) 内。希望这会有所帮助。

【讨论】：