20

ライン自体だけでなく、データ ポイントごとにマーカーを表示できれば、明確性が大幅に向上する 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;
});
4

5 に答える 5

17

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

まず、チャート内のすべてのポイントを選択し、塗りつぶしの不透明度を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);
于 2013-01-24T00:39:58.840 に答える
4

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にも書いています。メーカーの形状を変更する方法がわかります。

マーカーのサイズを変更する方法がわかりません。解決策を見つけようとしています。

于 2013-10-19T05:16:47.073 に答える