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 回答