1

nvd3.js eventLineChart を使用してモデル化された時系列のいくつかのポイントを強調しようとしています-より正確には、タイムスタンプを持つjsonオブジェクトがあり、タイムスタンプごとに、この特定の日付に垂直線を追加したいと思います/時間。強調表示されたポイントは、時系列データ ソースに存在しない可能性があり、時系列データのすべてのグループ (ティックなど) にわたってグローバルです。

これをどのように達成できるかについてのアイデアはありますか? - プロットに標準線を追加しようとしました (ハイライトしたいイベントのタイムスタンプに従って y1 と y2 と x を修正しました) が、タイムスタンプを元の時系列と同じ範囲にスケーリングできませんでした。

nv.models.lineChartに基づいて、その目的のために構築し始めたモデルの一部を次に示します。- (ほとんどのコードは lineChart モデルからの単なるコピーであるため、モデルの抜粋です):

nv.models.eventLineChart = function() {
// adds vertical highlights to line chart
"use strict";

var chartEvents = {}

function chart(selection) {
    selection.each(function(data) {

        // Setup Scales
        x = lines.xScale();
        y = lines.yScale();

        // Setup containers and skeleton of chart
        var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
        var g = wrap.select('g');
        gEnter.append('g').attr('class', 'nv-eventLinesWrap');
        //------------------------------------------------------------
        // Main Chart Component(s)
        var eventWrap = wrap
                            .select('.nv-eventLinesWrap')
                            .selectAll('.nv-eventLines')
                            .data(function(d) {return d });

        eventWrap
            .enter()
            .append('g')
            .attr('class', 'nv-eventLines');

        // chartEvents json ==> [{decsription: "test,"timestamp: 1375031820000}]
        var eventLine = eventWrap
                            .selectAll('.nv-eventLine')
                            .data(chartEvents, function(d){return (d.timestamp)});

        var eventLineEnter = eventLine.enter()
            .append('line').attr('class', 'nv-eventLine')
            .style('stroke-opacity', 0);

        // @todo set ymin and ymax
        eventLine
            .attr('x1', function(d){ return x(d.timestamp);})
            .attr('x2', function(d){ return x(d.timestamp);})
            .attr('y1', 300)
            .attr('y2', 800)
            .style('stroke', function(d,i,j) { return color(d,j) })
            .style('stroke-opacity', function(d,i) {
                return 1;
            });
    });
    return chart;
}

chart.setChartEvents = function(_) {
    if (!arguments.length) return chartEvents;
    chartEvents = _;
    return chart;
};    
return chart;}

このモデルは、次を使用して呼び出されます。

nv.addGraph(function() {
var nv3dChart = nv.models.eventLineChart().useInteractiveGuideline(true).setChartEvents(json.chartEvents);
// json.chartEvents >> [{decsription: "EventDescription,"timestamp: 1375031820000}]

nv3dChart.xAxis
    .showMaxMin(false);
    .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d)) }); 

nv3dChart.yAxis
    .axisLabel(widgetConfig.action.data.kpiName)
    .tickFormat(d3.format(',.f'));

var ndg = d3.select(renderToElementId+' svg');
ndg.datum([{
        values: json.data,
        key: widgetConfig.action.data.tagName
    }])    
.transition().duration(500);

nv.utils.windowResize(nv3dChart.update);

return nv3dChart;})

現在、このsvg出力を生成するもの（垂直線のみで表示されるイベント）

    <g class="nv-eventLines">
    <line class="nv-eventLine" x1="1375031820000" x2="1375031820000" y1="300" y2="800" style="stroke: #1f77b4;"></line>
</g>

.. 説明したように、折れ線グラフのスケールに従ってイベント x 値のスケーリングを実装する方法をまだ理解していません。

この問題に関する助けをいただければ幸いです

4

1 に答える 1

1

x と y のすべてのスケールを手動で作成し、nvd3 要素に追加しました。複数の nvd3 チャートに対してよりモジュール化された機能を作成できないため、このソリューションには特に満足していませんが、これは出発点です。

これが私の現在のソリューションの概要です。

nv.models.eventLineChart = function() {
// initialize scales
var y = d3.scale.linear(),
    x = d3.scale.linear();

// set scales of lines
lines = nv.models.line()
        .yScale(y)     


function chart(selection) {
    //@todo support for multiple series 

    // set domain and range for scales
    x
    .domain(d3.extent(data[0].values, function(d){return d.x}))
    .range([0,availableWidth]);

    y
    .domain(d3.extent(data[0].values, function(d){return d.y}))
    .range([0,availableHeight]);

    // add container for vertical lines
    gEnter.append('g').attr('class', 'nv-eventLinesWrap');

    // setup container
    var eventWrap = wrap.select('.nv-eventLinesWrap').selectAll('.nv-eventLines')
        .data(function(d) {return d });

    eventWrap.enter().append('g').attr('class', 'nv-eventLines');
    eventWrap.select('.nv-eventLinesWrap').attr('transform', 'translate(0,' + (-margin.top) +')');

    var eventLine = eventWrap.selectAll('.nv-eventLine').data(chartEvents, function(d){return (d.timestamp)});
    var eventLineEnter = eventLine.enter()
        .append('line').attr('class', 'nv-eventLine')

    // configure and style vertical lines
    //@todo: set color for lines 
    eventLine
        .attr('x1', function(d){ return x(d.timestamp)})
        .attr('x2', function(d){ return x(d.timestamp)})
        .attr('y1', y.range()[0])
        .attr('y2', y.range()[1])
        .style('stroke', function(d,i,j) { return "#000"; })
        .style('stroke-width',1)

    // @todo add vertical lines via transitions, add vLine content to toolbox
}}

ラース、あなたの貢献に感謝します..彼らは特定の部分をより詳細に理解するのに本当に役立ちました.

誰かがこの問題を解決するためのより良いアイデアを思いついた場合は、ここにこれらの提案を投稿していただければ幸いです!

于 2013-10-03T09:00:57.037 に答える