blocks|key|422544|text|我还想在我正在做的一个项目中添加标记。这是我和我的搭档找到的一个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422545|首先，您必须选择图表中的所有点，并将填充不透明度设置为1：|422546|#my-chart+.nv-lineChart+circle.nv-point
{
++++fill-opacity:+1;
}|code-block|syntax|javascript|422547|现在，您的点将可见。要调整每个点的大小，需要修改每个点的"r“(表示半径)属性。这不是一种风格，所以你不能用css来做。下面是完成这项工作的一些jQuery代码。500毫秒的延迟是为了使代码在呈现图表之前不会运行。此代码段将半径设置为3.5：|422548|++++++++setTimeout(function()+{
++++++++++++$('#my-chart+.nv-lineChart+circle.nv-point').attr("r",+"3.5");
++++++++},+500);|422549|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I also wanted to add markers in a project I was working on. Here is a solution my partner and I found. 

First, you have to select all of the points in your chart and set the fill-opacity to 1:

<pre><code>#my-chart .nv-lineChart circle.nv-point
{
 fill-opacity: 1;
}
</code></pre>

Now your points will be visible. To adjust the size of each point you need to modify each one's "r" (for radius) attribute. This isn't a style so you can't do it with css. Here is some jQuery code that does the job. The 500 millisecond delay is so the code will not run before the chart is rendered. This snippet sets the radius to 3.5:

<pre><code> setTimeout(function() {
 $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
 }, 500);
</code></pre>

blocks|key|204417|text|使用nvd3中的以下逻辑，有选择地启用指向某个系列的指针。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204418|//i+is+the+series+number;+starts+with+0

var+selector+=+'g.nv-series-'%2Bi%2B'+circle';
d3.selectAll(selector).classed("hover",true);|code-block|syntax|javascript|204419|但是，在数据中添加一个额外的参数(比如'enable_points':'true')会更有意义。我希望通过这个想法来推动nvd3的一些变化。|204420|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Selectively enable points to some series using the following logic in nvd3.

<pre><code>//i is the series number; starts with 0

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

However an additional parameter( like say 'enable_points':'true') in the data would make better sense. I will hopefully push some changes to nvd3 with this idea.

blocks|key|204468|text|当前版本的nvd3使用路径而不是圆来绘制标记。这是我用来显示标记的一段css代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204469|#chart+g.nv-scatter+g.nv-series-0+path.nv-point
{
++++fill-opacity:+1;
++++stroke-opacity:+1;
}|code-block|syntax|javascript|204470|我还在https://github.com/novus/nvd3/issues/321中写了一些关于这个的东西，你可以发现我是如何改变制造者的形状的。|offset|length|204471|我不知道怎么改变记号笔的大小。试图找到一个解决方案。|204472|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/novus/nvd3/issues/321^0|0|0|3|14|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

The current version of nvd3 use path instead of circle to draw markers. Here is a piece of css code that i used to show markers.

<pre><code>#chart g.nv-scatter g.nv-series-0 path.nv-point
{
 fill-opacity: 1;
 stroke-opacity: 1;
}
</code></pre>

And I also write something about this in <a href="https://github.com/novus/nvd3/issues/321" rel="nofollow">https://github.com/novus/nvd3/issues/321</a>, you could find that how i change the shape of makers.

I don't know how to change the size of markers. Trying to find a solution.

blocks|key|204532|text|这让我很困惑，直到我得到了社区的帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204533|css+styling+of+points+in+figure|offset|length|204534|所以这是我的解决方案，基于css|style|CODE|204535|.nv-point+{
++++stroke-opacity:+1!important;
++++stroke-width:+5px!important;
++++fill-opacity:+1!important;
}|code-block|syntax|javascript|204536|如果有人从rCharts来到这里，下面是一个用于创建同时包含线条和标记的nPlot的rmarkdown模板：|204537|+```{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+(%25+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+%2B+'%25'}+!#")
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)|204538|204539|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/27892806/css-styling-of-points-in-figure^0|0|0|V|0|0|D|3|0|0|5|7|10|5|16|9|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@$D|17|E|18|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$D|1B|E|1C|H|I]|$D|1D|E|1E|H|I]|$D|1F|E|1G|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|T|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

This puzzled me until I got help from the community:

<a href="https://stackoverflow.com/questions/27892806/css-styling-of-points-in-figure">css styling of points in figure</a>

So here is my solution, based on <code>css</code>:

<pre><code>.nv-point {
 stroke-opacity: 1!important;
 stroke-width: 5px!important;
 fill-opacity: 1!important;
}
</code></pre>

If anyone has come here from <code>rCharts</code>, below is a <code>rmarkdown</code> template to create an <code>nPlot</code> with both lines and markers:

<pre><code> ```{r 'Figure'} 
require(rCharts)
load("data/df.Rda") 
# round data for rChart tooltip display
df$value &lt;- round(df$value, 2)
n &lt;- 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 = '&lt;style&gt;
 .nv-point {
 stroke-opacity: 1!important;
 stroke-width: 6px!important;
 fill-opacity: 1!important;
 } 
&lt;/style&gt;'
)
n$save('figures/Figure.html', standalone = TRUE)
```
</code></pre>

blocks|key|204582|text|对于当前版本的NVD3+(1.8.x)，我使用这个基于D3的解决方案(只需要脚本，不需要CSS文件或样式块)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204583|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");
}
);|code-block|syntax|javascript|204584|所使用的样式正是NVD3通过将"hover“类应用于每个点(当悬停时)添加的样式。根据您的需要调整它们。|204585|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For current version of NVD3 (1.8.x), I use this D3-based solution (scripting only, no CSS file or style block required):

<pre><code>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");
}
);
</code></pre>

The styles used are exactly the styles added by NVD3 by applying the "hover" class to each point (when hovered). Adjust them to your needs.

I'm making an NVD3 line plot that will have significantly improved clarity if I can get markers to show for each data point instead of just the line itself. Unfortunately, I haven't been able to find an easy way to do this with NVD3 yet. I also considered using a scatter plot, but I couldn't figure out how to show connecting lines between the points. A third option I considered was to overlay a line and scatter plot, but this would show each series twice in the legend and may cause other unnecessary visual complications.

Is there a way to elegantly pull this off yet? Sample code of my formatting technique is listed below, but the 'size' and 'shape' attributes in test_data have no effect on the line plot with the current code.

<pre><code>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;
});
</code></pre>

Is an NVD3 Line Plot with Markers Possible?

jQuery

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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