在d3.js中设置轴的css [英] setting css of axis in d3.js

问题描述

在d3.js中有没有做.axis path {fill：none}？

Is there away to do .axis path { fill : none } in d3.js?

我试过.attr和.style on .call .svg.axis（）但无效，我只是在这里做错了...

I've tried .attr and .style on .call(d3.svg.axis() but to no avail. I just be doing something wrong here...

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

The full code which I'm using to create my axes is below:

 // 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");

推荐答案

当我要对d3元素应用CSS设置时，我发现最容易为他们分配一个ID或类（你在上面做），然后使用CSS应用所需的属性。例如，保持JS如上，然后在css中：

When I want to apply CSS settings to d3 elements, I find that it is easiest to assign them an ID or class (which you do above), and then apply the desired attributes using CSS. For example, keep the JS as above, and then in css do:

.axis path {

    fill:           none;
}

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

If you want to do it in the JS, you should use:

.style('fill', 'none')

但是，应该将它应用于包含轴的svg，而不是.call（d3.svg.axis（））中的。希望这有帮助。

However, you should apply it to the svg which contains the axis, not inside the .call(d3.svg.axis()). Hope this helps.

这篇关于在d3.js中设置轴的css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！