是否可以使用带标记的NVD3线状图？
是否可以使用带标记的NVD3线状图？
提问于 2012-12-06 05:39:38
我正在制作一个NVD3线状图，如果我可以为每个数据点显示标记，而不仅仅是线条本身，那么它将显着提高清晰度。不幸的是，我还没能找到一种简单的方法来用NVD3来做这件事。我也考虑过使用散点图，但我不知道如何显示这些点之间的连接线。我考虑的第三个选择是叠加一条线和散点图，但这将在图例中显示每个系列两次，并可能导致其他不必要的视觉复杂性。
有没有办法优雅地做到这一点呢？下面列出了我的格式化技术的示例代码，但是test_data中的'size‘和'shape’属性对当前代码的线条图没有影响。
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;
});Stack Overflow用户
发布于 2013-01-24 08:39:59
我还想在我正在做的一个项目中添加标记。这是我和我的搭档找到的一个解决方案。
首先，您必须选择图表中的所有点，并将填充不透明度设置为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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13732971
复制相关文章
相似问题
腾讯云开发者
