20

我正在制作一个 NVD3 线图，如果我可以为每个数据点显示标记而不仅仅是线本身，它将显着提高清晰度。不幸的是，我还没有找到一种简单的方法来使用 NVD3 做到这一点。我也考虑过使用散点图，但我不知道如何显示点之间的连接线。我考虑的第三个选项是覆盖一条线和散点图，但这会在图例中显示每个系列两次，并可能导致其他不必要的视觉复杂化。

有没有办法优雅地完成这个？下面列出了我的格式化技术的示例代码，但 test_data 中的“大小”和“形状”属性对当前代码的线图没有影响。

test_data = [ {     key: 'series1',
            values: [
                { x: 1, y: 2.33, size:5, shape:"circle" },
                { x: 2, y: 2.34, size:5, shape:"circle" },
                { x: 3, y: 2.03, size:5, shape:"circle" },
        ] } ];


nv.addGraph(function() {
  var test_chart = nv.models.lineChart();
  test_chart.xAxis.axisLabel('Sample Number');
  test_chart.yAxis
        .axisLabel('Voltage (V)')
        .tickFormat(d3.format('.02f'));

  d3.select('#test_plot')
      .datum(test_data)
    .transition().duration(500)
      .call(test_chart);

  nv.utils.windowResize(test_chart.update);
  return test_chart;
});
4

5 回答 5

17

我还想在我正在处理的项目中添加标记。这是我和我的搭档找到的解决方案。

首先，您必须选择图表中的所有点并将填充不透明度设置为 1：

#my-chart .nv-lineChart circle.nv-point
{
    fill-opacity: 1;
}

现在您的积分将可见。要调整每个点的大小，您需要修改每个点的“r”（半径）属性。这不是一种风格，所以你不能用 css 来做。这是一些可以完成这项工作的 jQuery 代码。500 毫秒的延迟是为了让代码在图表呈现之前不会运行。此代码段将半径设置为 3.5：

        setTimeout(function() {
            $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
        }, 500);
于 2013-01-24T00:39:58.840 回答
11

这让我感到困惑，直到我得到社区的帮助：

图形中点的css样式

所以这是我的解决方案，基于css：

.nv-point {
    stroke-opacity: 1!important;
    stroke-width: 5px!important;
    fill-opacity: 1!important;
}

如果有人从这里来rCharts，下面是一个rmarkdown模板，用于创建一个nPlot带有线条和标记的模板：

 ```{r 'Figure'}  
require(rCharts)
load("data/df.Rda") 
# round data for rChart tooltip display
df$value <- round(df$value, 2)
n <- nPlot(value ~ Year, group = 'variable', data = df, type = 'lineChart') 
n$yAxis(axisLabel = 'Labor and capital income (% national income)')
n$chart(margin = list(left = 100)) # margin makes room for label
n$yAxis(tickFormat = "#! function(d) {return Math.round(d*100*100)/100 + '%'} !#")
n$xAxis(axisLabel = 'Year')
n$chart(useInteractiveGuideline=TRUE)
n$chart(color = colorPalette)
n$addParams(height = 500, width = 800)
n$setTemplate(afterScript = '<style>
  .nv-point {
    stroke-opacity: 1!important;
    stroke-width: 6px!important;
    fill-opacity: 1!important;
  } 
</style>'
)
n$save('figures/Figure.html', standalone = TRUE)
```
于 2015-01-11T23:53:09.073 回答
4

当前版本的 nvd3 使用 path 而不是 circle 来绘制标记。这是我用来显示标记的一段 css 代码。

#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}

我还在https://github.com/novus/nvd3/issues/321中写了一些关于此的内容，您可以发现我如何改变制造商的形状。

我不知道如何更改标记的大小。试图找到解决方案。

于 2013-10-19T05:16:47.073 回答
2

使用 nvd3 中的以下逻辑有选择地启用指向某些系列的点。

//i is the series number; starts with 0

var selector = 'g.nv-series-'+i+' circle';
d3.selectAll(selector).classed("hover",true);

然而，数据中的附加参数（比如说'enable_points'：'true'）会更有意义。我希望用这个想法对 nvd3 进行一些更改。

于 2013-09-17T17:08:03.650 回答
2

对于当前版本的 NVD3 (1.8.x)，我使用这个基于 D3 的解决方案（仅脚本，不需要 CSS 文件或样式块）：

nv.addGraph(function() {
  // ...
  return chart;
},
function() {
  // this function is called after the chart is added to document
  d3.selectAll('#myChart .nv-lineChart .nv-point').style("stroke-width",
    "7px").style("fill-opacity", ".95").style("stroke-opacity", ".95");
}
);

使用的样式正是 NVD3 通过将“悬停”类应用于每个点（悬停时）添加的样式。根据您的需要调整它们。

于 2016-04-20T13:25:27.940 回答