NVD3.js 中的轴标签

Question

我正在寻找如何修改NVD3.js

中X轴和Y轴标签字体的字体大小和属性

文档似乎没有指明执行此操作的选项。可能吗？

Answer 1

NVD3 或 D3 本身似乎没有默认值属性。

但是我们可以通过直接将其应用于轴的文本元素来更改字体大小或任何其他 SVG CSS 属性。这可以通过使用 <style> 标记或使用 d3.select().

来完成

轴文本标签由 <text> 个节点创建。对于两个轴，都有父容器元素，它们具有以下类.

nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes

因此很容易使用它们来设置文本标签 CSS 属性。

.nv-x text{
  font-size: 20px;
  fill: blue;
}
.nv-y text{
  font-size: 17px;
  fill:red;
}

以下是 NVD3 中可用的其他属性的 link。

http://nvd3-community.github.io/nvd3/examples/documentation.html

下面是 D3 中 SVG 轴属性的 link。

https://github.com/mbostock/d3/wiki/SVG-Axes

这些不包括任何关于设置刻度字体大小的信息。

以下是工作代码示例。

<html>
<head>
 <style>
  #chart svg {
    height: 300px;
  }
  .nv-x text{
    font-size: 20px;
          fill: blue;
  }
        .nv-y text{
    font-size: 17px;
          fill:red;
  }
 </style>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
 <script type="text/javascript" src="http://nvd3.org/assets/lib/d3.v2.js"></script>
 <script type="text/javascript" src="http://nvd3.org/assets/lib/fisheye.js"></script>
 <script type="text/javascript" src="http://nvd3.org/assets/js/nv.d3.js"></script>
</head>
<body>
 <div id="chart">
   <svg></svg>
 </div>


 <script>
  var data = function() {
    var sin = [],
     cos = [];

    for (var i = 0; i < 100; i++) {
   sin.push({x: i, y: Math.sin(i/10)});
   cos.push({x: i, y: .5 * Math.cos(i/10)});
    }

    return [
   {
     values: sin,
     key: 'Sine Wave',
     color: '#ff7f0e'
   },
   {
     values: cos,
     key: 'Cosine Wave',
     color: '#2ca02c'
   }
    ];
  };

  nv.addGraph(function() {
    window.chart = nv.models.lineChart()
   .useInteractiveGuideline(true)
   ;

    chart.xAxis
   .axisLabel('Time (ms)')
   .tickFormat(d3.format(',r'))
   ;

    chart.yAxis
   .axisLabel('Voltage (v)')
   .tickFormat(d3.format('.02f'))
   ;
   

    d3.select('#chart svg')
   .datum(data())
   .transition().duration(500)
   .call(chart)
   ;

    nv.utils.windowResize(chart.update);

    return chart;
  });

  
 </script>
</body>
</html>

Answer 2

我不相信你可以通过 NVD3 Javascript API 做到这一点。 NVD3 库在 CSS 中指定轴颜色和字体大小等内容。

您应该检查 nv.d3.css 文件，了解它们如何配置不同的 CSS 属性。

为了具体回答你的问题，我相信你可以尝试以下 CSS 来完成你的问题：

.nvd3 .nv-axis.nv-x text {
    font-family: ...;
    font-size: ...;
    fill: ...'
}

注意：使用填充来改变颜色，而不是颜色（因为我们处理的是 SVG

NVD3.js 中的轴标签

Axis labels in NVD3.js

javascript

charts

nvd3.js

angular-nvd3