首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否可以使用带标记的NVD3线状图?

是否可以使用带标记的NVD3线状图?
EN

Stack Overflow用户
提问于 2012-12-06 05:39:38
回答 5查看 14.8K关注 0票数 20

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

有没有办法优雅地做到这一点呢?下面列出了我的格式化技术的示例代码,但是test_data中的'size‘和'shape’属性对当前代码的线条图没有影响。

代码语言:javascript
复制
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;
});
EN

回答 5

Stack Overflow用户

发布于 2013-01-24 08:39:59

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

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

代码语言:javascript
复制
#my-chart .nv-lineChart circle.nv-point
{
    fill-opacity: 1;
}

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

代码语言:javascript
复制
        setTimeout(function() {
            $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
        }, 500);
票数 17
EN

Stack Overflow用户

发布于 2015-01-12 07:53:09

这让我很困惑,直到我得到了社区的帮助:

css styling of points in figure

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

代码语言:javascript
复制
.nv-point {
    stroke-opacity: 1!important;
    stroke-width: 5px!important;
    fill-opacity: 1!important;
}

如果有人从rCharts来到这里,下面是一个用于创建同时包含线条和标记的nPlotrmarkdown模板:

代码语言:javascript
复制
 ```{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)
代码语言:javascript
复制
票数 11
EN

Stack Overflow用户

发布于 2013-10-19 13:16:47

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

代码语言:javascript
复制
#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}

我还在https://github.com/novus/nvd3/issues/321中写了一些关于这个的东西,你可以发现我是如何改变制造者的形状的。

我不知道怎么改变记号笔的大小。试图找到一个解决方案。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13732971

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档