样式d3轴与js而不是CSS

style d3 axis with js rather than CSS

本文关键字：CSS js d3 轴与 样式      更新时间：2023-09-26

是否有一种方法可以像这样使用js来样式d3.js图表轴:

 svg.append("text")
     .attr("x",xPos)
     .attr("y",yPos -3)
     .attr("font-family", "sans-serif")
     .attr("font-size", "10px")
     .attr("font-weight", "bold")
     .attr("fill", "black")
     .attr("text-anchor", "middle")
     .attr("id", "tooltip")
     .attr("transform", "translate(" + width/2 + ")")
     .text(d.name +": "+ d.value);

而不是使用使用CSS的标准方法。这是一个CSS的例子，我想删除和样式我的轴与JS

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar {
  fill: steelblue;
}
.x.axis path {
  display: none;
}

如果可以的话，我总是提倡使用CSS样式-这是它的设计目的，但是如果你愿意，你也可以手动设置样式。

例如，如果您想要样式化中轴线，您可以选择添加轴的"容器"或元素(在本例中我假设是svg:g)，并执行以下操作:

g.selectAll(".axis line")
 .style("fill", "none")
 .style("stroke", "#000")
 .style("shape-rendering", "crispEdges");
}
相关文章：