Question

有没有办法用与此类似的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;
}

Answer 1

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

例如，如果你想为轴线设置样式，你可以选择＆＃34;容器＆＃34;或者您在其中添加轴的元素（在这种情况下我将假设svg:g）并执行以下操作：

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

样式d3轴与js而不是CSS

1 个答案: