在d3.js中设置轴的css

时间:2012-07-27 18:58:04

标签: javascript svg d3.js

d3.js中有.axis路径{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");

1 个答案:

答案 0 :(得分:9)

当我想将CSS设置应用于d3元素时,我发现最简单的方法是为它们分配ID或类(您在上面执行),然后使用CSS应用所需的属性。例如,保持JS如上所述,然后在css中执行:

.axis path {

    fill:           none;
}

如果你想在JS中这样做,你应该使用:

.style('fill', 'none')

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