javascript 在 d3.js 中设置轴的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11694038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setting css of axis in d3.js
提问by Apollo
Is there away to do .axis path { fill : none } in d3.js?
有没有在 d3.js 中做 .axis path { fill : none } ？
I've tried .attr and .style on .call(d3.svg.axis() but to no avail. I just be doing something wrong here...
我已经在 .call(d3.svg.axis() 上尝试过 .attr 和 .style 但无济于事。我只是在这里做错了什么......
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");
回答by mike
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:
当我想将 CSS 设置应用于 d3 元素时，我发现最简单的方法是为它们分配一个 ID 或类（您在上面所做的），然后使用 CSS 应用所需的属性。比如保持上面的JS，然后在css中做：
.axis path {
fill: none;
}
If you want to do it in the JS, you should use:
如果你想在 JS 中做到这一点，你应该使用：
.style('fill', 'none')
However, you should apply it to the svg which contains the axis, not inside the .call(d3.svg.axis()). Hope this helps.
但是，您应该将其应用于包含轴的 svg，而不是在 .call(d3.svg.axis()) 内。希望这可以帮助。
