Question

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

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

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;
});

The link to the jsfiddle

谢谢。

Answer 1

您可以覆盖nv.d3.css来实现此目标

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

希望它有所帮助。

NVD3散点图不透明度

1 个答案: