Возможна ли линейка NVD3 с маркерами?

Я делаю линейный график NVD3, который значительно улучшит ясность, если я смогу отобразить маркеры для каждой точки данных, а не только для самой строки. К сожалению, я пока не смог найти простой способ сделать это с NVD3. Я также рассмотрел использование графика рассеяния, но я не мог понять, как показать соединительные линии между точками. Третий вариант, который я рассматривал, состоял в том, чтобы наложить график линии и рассеивания, но это будет показывать каждую серию дважды в легенде и может вызвать другие ненужные визуальные осложнения.

Есть ли способ элегантно снять это? Пример кода моего метода форматирования приведен ниже, но атрибуты 'size' и 'shape' в 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;
});

Ответы

Ответ 1

Я также хотел добавить маркеры в проект, над которым я работал. Вот решение, которое нашел мой партнер.

Сначала вы должны выбрать все точки в диаграмме и установить заливку-непрозрачность на 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);

Ответ 2

Это озадачило меня, пока я не получил помощь от сообщества:

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)
```

Ответ 3

Текущая версия nvd3 использует путь вместо круга для рисования маркеров. Вот фрагмент кода 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, вы можете обнаружить, что я изменяю форму создателей.

Я не знаю, как изменить размер маркеров. Попытка найти решение.

Ответ 4

Выборочно включить точки в некоторые серии, используя следующую логику в 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.

Ответ 5

Для текущей версии 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, путем применения класса "hover" к каждой точке (при зависании). Настройте их на свои нужды.