web-dev-qa-db-ja.com

マーカー付きのNVD3折れ線グラフは可能ですか？

線自体だけでなく、データポイントごとにマーカーを表示できると、明快さが大幅に向上するNVD3折れ線グラフを作成しています。残念ながら、NVD3でこれを行う簡単な方法をまだ見つけることができていません。散布図の使用も検討しましたが、点間の接続線を表示する方法がわかりませんでした。私が検討した3番目のオプションは、線と散布図をオーバーレイすることでしたが、これにより、各シリーズが凡例に2回表示され、他の不要な視覚的問題が発生する可能性があります。

これをエレガントにやってのける方法はまだありますか？私のフォーマット手法のサンプルコードを以下に示しますが、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;
});
nvd3.js
20
Buysacoke

また、自分が取り組んでいるプロジェクトにマーカーを追加したかったのです。これが私のパートナーと私が見つけた解決策です。

まず、チャート内のすべてのポイントを選択し、塗りつぶしの不透明度を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);
17
amauboussin

これは私がコミュニティから助けを得るまで私を困惑させました：

図のポイントの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)
```
11
PatrickT

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
calfzhou

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によって追加されたスタイルです（ホバーされた場合）。必要に応じて調整してください。

2
Florian Albrecht

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にいくつかの変更をプッシュします。

2
Sandeep