NVD3散点图点透明度 [英] NVD3 Scatter Plot Point Opacity

问题描述

我一直在尝试设置由nvd3生成的散点图的点的不透明度。我试图使用CSS设置点的不透明度，但它没有工作。关于如何设置不透明度的任何想法？

I been trying to set the opacity of the points of a scatter plot generate by nvd3. I tried to use CSS to set the opacity of the points but it didn't work. Any idea on how to set the opacity?

这是我用来生成图形的代码：

This is the code that I use to generate the graph:

var data = [
  {
    key: "group1",
    values:[
    {
        x: 10,
        y: 10
    },
    {
        x: 20,
        y: 10
    },
    {
        x: 30,
        y: 10
    }
    ]
  }
]

nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(false)
                .showDistY(false)
                .color(d3.scale.category10().range())
                .pointRange([100,100]);

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

链接到jsfiddle

谢谢。

推荐答案

您可以覆盖 nv.d3.css 以实现

.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
  fill-opacity: 0.8 !important;
  stroke-opacity: 0.8 !important;
}

希望它有帮助。

这篇关于NVD3散点图点透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！