将 CSS 个元素映射到 D3

Question

我有一个用 D3 绘制条形图的功能。我需要将这个 CSS 元素添加到我的结构中：

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

.x.axis path {
  display: none;
}

我不明白应该将这些 css 元素映射到哪些变量或如何映射。

我的代码使用了 this example。基本上我正在尝试映射这些 css 元素，例如：

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("font-family","sans-serif")
        .style("font-size","10px")
        .style("text-anchor", "end")
        .text("Publications");

但我不知道如何映射 .axis path、.axis line 和 .x.axis path css 元素。如果有任何帮助，我将不胜感激。

Answer 1

<html>
  <head>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

      .x.axis path {
        display: none;
      }
    </style>
  </head>
  <body>
    <script>
      svg = ...// Your code here
      yAxis = ...// Your code here
      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("font-family","sans-serif")
        .style("font-size","10px")
        .style("text-anchor", "end")
        .text("Publications");
    </script>
  </body>
</html>

当您执行 .call(yAxis) 时，d3 在您的 <g class="y axis"> 中创建与轴相关的 <path> 和 <line> 节点。一旦 d3 创建它们，这些节点将满足 <style> 中的 css 选择器（例如 .axis path）并关闭笔划等。我相信这回答了我认为你在问什么。

将 CSS 个元素映射到 D3

Mapping CSS elements to D3

javascript

css

d3.js