是否可以绘制带有标记的 NVD3 线图? [英] Is an NVD3 Line Plot with Markers Possible?

问题描述

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

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.

有没有办法优雅地解决这个问题?下面列出了我的格式化技术的示例代码，但 test_data 中的 'size' 和 'shape' 属性对当前代码的线图没有影响.

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.

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

推荐答案

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

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

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

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

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

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

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:

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

这篇关于是否可以绘制带有标记的 NVD3 线图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！